vue中利用webpack优化打包构建速度

1、webpack.dll打包

(第一次打包比较慢，之后就很快了)

https://www.bilibili.com/video/BV1fm4y1N7dP/?spm_id_from=333.337.search-card.all.click&vd_source=2fdf156def7c5283b54dd07021e8099f

 

坑： 不是所有的文件都可以用dll打包，比如lodash

能提的 vue vuex vue-router 外部优化框架

vue-cli中webpack版本是webpack4 所以对应的webpack cli 版本必须是3.3.12，不然运行报错

 

一、webpack.dll.js文件中使用插件webpack.DllPlugin

二、vue.config.js 中使用 webpack.DllReferencePlugin({

context: process.cwd(), // 当前命令窗口

manifest: requiret("./public/vendor/vendor-manifest.json") // dll打包存放的目录地址

})

 

三、public中的index.html 用script 重新引入vemdor打包文件地址

 

四、pakage.json中配置dll

"script": {

    "dll": "webpack --config webpack.dll.js"

}

五、运行dll npm run dll 在public文件中会生成vendor文件夹

此时提示安装webpack cli  vue-cli中webpack版本是webpack4 所以对应的webpack cli 版本必须是3.3.12，不然运行报错

 

2、多线程打包thread-loader

（开多线程本身也需要时间，除非项目比较大.vue文件比较多，不然可能会起到反作用）

config.module.rule("vue").use("thread-loader").loader("thread-loader").tap(() => {

return {

// 根据cpu内核数决定开几个线程

worker:  os.cpus().length

}

}).before("vue-loader")

 

3、开发环境不用打包node_modules文件、可以用exclude()排除js文件的打包（webpack本身就可以处理js、json文件，但是vue、css这些webpack无法识别，必须借助loader、plugin）

chainWebpack下的配置

if (process.env.NODE_ENV === 'development') {

   config.module.rule('js').exclude.add(resolve("/node_modules")).add(resolve("/src")

}