状况阐明：前端我的项目，技术框架是vue 2.x + element ui + highcharts，平台内容是基金股票相干（基金行情、基金产品详情、基金经理详情、尽调报告；股票行情；模仿组合，在售组合等）目前我的项目曾经超过11万行代码，开发编译(本地)须要1min左右，生产编译(本地)均匀须要17min左右。因为是docker容器化部署，每次上线都要跑流水线编译公布，线上编译的CPU可能不如本地，跑一次流水线的工夫在60-90min不等，其中编译工夫大多在40-60min，慢！！

这周抽空钻研一下如何进步编译速度。
(同步更新到本人的语雀，文章、代码的款式更好看点
能够移步https://www.yuque.com/diracke...)

翻阅各类文章材料，看下来思路有三个：
1、loader多过程 2、压缩工具多过程 3、dllPlugin

在这里先说各条思路实际下来的论断
1、loader多过程 --失败，做无用功
（被讲的最多的是利用happypack开启多过程Loader转换，次要用来晋升babel的速度）
vue/cli3 中 自带了 thread-loader ( == happypack ) 用于多过程解决，仅在生产环境凋谢。

2、应用webpack-parallel-uglify-plugin加强代码压缩 （uglify 多过程） --uglifyJs自带多过程，我都不晓得这个webpack-parallel-uglify-plugin的作者在干啥，再加上晋升无限，没摸索
“自带的js压缩插件是单线程的，而该插件会开启多个子过程，将压缩工作分给多个子过程去实现，每个子过程还是通过uglifyjs去压缩代码，无非就是并行处理压缩，效率更高。”
下面这段话，我见了十分多，但调研发现，webpack官网的uglifyjs本身有多过程选项，且uglify在我的编译16min中仅占一分钟，所以没有往下走，这条思路是否正确意义不大，晋升无限。
（调研工夫2021年12月16日，npm上看，uglifyjs最初一个版本v2.2.0是两年前公布的，而webpack-parallel-uglify-plugin最初一个版本v2.0.0是一年前公布的）

3、dllPlugin 提取出咱们罕用的第三方模块，独自打成一个文件包，之后插入到咱们的html页面中。这样咱们当前每次打包，都不须要针对第三方模块进行解决，毕竟第三方模块动辄成千上万行。
第一次读到这句话的时候，我认为dll的编译会花很多工夫，之后因为应用了dll的编译产物，所以每次编译的时候就节俭了共用dll的编译工夫。（首次残缺编译的时候，别离编译出dll文件和我的项目文件。之后再编译的时候只须要编译我的项目文件，不须要编译dll文件，节俭的是编译第三方库的工夫，然而对docker这样的容器化部署，dll和cache都没有用，因为每次流水线都是从新编译的过程。因而还想到了走3的思路，把第三方库独自打包，且起一个服务，提供dll.js文件的思路）（同一份代码，两条流水线，两份编译产物）
实际上，dll文件的编译只须要1min左右，而插入dll之后，我的项目编译的工夫变成了6min左右（也就是说整个编译工夫变成了7min左右）。
dll的形式节省时间的起因是它缩小了拆解第三方库再打包到各个chunk的工夫。这是dll形式最大的意义所在。
艰深来讲，dll的形式就是在vue我的项目中，通过在App.vue中通过<script type="text/javascript" src="http://url"></script>的形式引入打包的第三方库dll.js文件。
<body>

<div id="app"></div><script type="text/javascript" src="url/dll01.dll.js"></script><script type="text/javascript" src="url/dll02.dll.js"></script><!-- ... 多个dll文件引入-->

</body>

讲过程之前先说须要用到的量化、剖析打包工夫的工具
speed-measure-webpack-plugin （SMP）
这个包能够统计编译的总工夫，以及测量各个插件和 loader 在编译过程中破费的工夫。

装置过程参考这篇blog
《Vue-cli 中 Webpack 配置优化（一）》 留神区别vue cli2 vue cli 3
https://www.cnblogs.com/zhuro...

本来我的项目编译工夫统计

剖析发现各种loader以及uglifyJs占用工夫不多，16min外面的大头应该是把文件编译成chunk.js的过程。
退出dll之后 dll的编译工夫在1min左右，我的项目打包工夫变为了6min

DLL应用过程

1、装置依赖项
webpack
clean-webpack-plugin （用于在构建之前清空构建文件夹）
add-asset-html-webpack-plugin （主动插入dll.js的援用链接）

2、在vue.config.js同级目录下新建webpack.dll.config.js文件

3、在webpack.dll.config.js中，引入依赖项，写配置（写须要抽离的第三方库，打包成独自的js文件，留神看entry外面的配置，这个写法会打包出4个dll.js文件）

4、在package.json写一个编译命令 "build:dll": "webpack --config webpack.dll.config.js"

5、运行编译命令npm run build:dll，失去dll文件

开展/dll的目录，能够看到以vuebundle、vendor、ui、util结尾的dll.js文件和以vuebundle、vendor、ui、util结尾的manifest.json文件。

6、改写vue.config.js，使得npm run build的时候不编译曾经进入dll.js的第三方库文件，同时在编译的时候主动插入援用dll的<script src="http://url"></script>标签。

dllNameArr数组外面的各项，要和webpack.dll.config.js里 entry的各项一一对应。

另外chainWebpack中，要减少配置项，在生产环境编译的时候开启dllReference。

在第6步的时候要留神，援用dll文件夹的门路是什么。
（如果报错，就要批改vue.config.js中publicPath，或者批改webpack.dll.config.js中output的path）

7、最初npm run build，功败垂成。

容器化部署还须要去改流水线脚本，与本文无关，完结！

-- 附参考文章材料
2019年08月14日 21:19 《vue我的项目打包优化之happypack》
https://juejin.cn/post/684490...
这是个老式的webpack.base.conf.js配置形式
文章说HappyPack 对file-loader、url-loader 反对的不敌对
文章说HappyPack 对less-loader、sass-loader、stylus-loader反对的不敌对

2017-08-29 happypack compatibility list
https://github.com/amireh/hap...
这里 happypack 反对列表里 有sass-loader 和 css-loader 然而很可怜，vue-loader和sass-loader 以及 css-loader 不兼容

2021-01-06 16:47:12《利用webpack-chain配置happypack和DllReferencePlugin》
https://blog.csdn.net/qq_3467...
这个文章提到
须要用const hRule = config.module.rule('js')的形式显示定义，而不要间接链式调用。
const hRule = config.module.rule('js') 再进行过滤和匹配，如果间接在config.module.rule('js').test(/.js$/).include.add(resolve('src')) .end()是不对的，有可能是不报错又不失效的，有的是打包正式环境会报错。

2019-10-13 《基于vue-cli的webpack打包优化实际及摸索》
https://segmentfault.com/a/11...
因为vue文件中会含有CSS，所以vue-loader会提取出其中的css，交给其余loader解决，vue-loader-plugin会通过在vue文件前面加上查问字符串来通知其余loader，针对这个文件要做解决。意味着什么呢？咱们的vue-loader在解决文件的时候，告诉其余loader解决，然而此时的loader配置曾经被咱们改写成了happypack，而vue又与happypack不兼容，最终导致了报错。很遗憾的通知大家，vue-cli接入happypack--失败。

2019-10-08 《vuecli3怎么应用happypack》
https://segmentfault.com/q/10...
答复1 从webpack4发表之后，happypack曾经不保护了，退出历史舞台了，有新的thread-loader代替。另外，如果你只是单纯地想放慢编译打包速度的话，不如上dllplugin，这个比thread-loader快。
答复2 vuecli3不须要应用happypack，vuecli3脚手架默认采纳了thread-loader（与happypack作用雷同）放慢编译。(仅生产环境)

2020-03-31 《Vue-cli 中 Webpack 配置优化（一）》
https://www.cnblogs.com/zhuro...
量化、剖析打包工夫的插件SMP 区别vue cli2 vue cli 3

2018-09-03《[Vue CLI 3] 配置解析之 parallel》
https://segmentfault.com/a/11...
（这一篇有很多同名文章，也有一篇全英的文章找不到发表日期
https://titanwolf.org/Network...
不晓得谁抄谁）
通过测试得出结论:
thread-loader的开启条件，开启后的作用和上文中的表述一样
（和上面这段代码的成果一样）
const useThreads = process.env.NODE_ENV === 'production' && options.parallel;
if (useThreads) {
jsRule
.use('thread-loader')
.loader('thread-loader')
}

然而我没有在vue我的项目 以及 @vue/cli中找到这段源码。
最相似的代码出自
https://gist.github.com/imanh...
vue-cli-apollo-webpack-config.js 这里的代码
如果有源码出处，请指教。

注: 不须要在vue.config.js中对 parallel进行手动配置
如果在某个我的项目外面看到 vue.config.js 配置了：
parallel: require('os').cpus().length > 1
删掉它。无用，多余。

2020-11-22 《初尝Vue3，通过DllPlugin 和 DllReferencePlugin优化打包》
https://blog.csdn.net/vipshop...