转眼已经是2019年，短短三四年时间，webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？大家也是能够信手拈来的说出缓存、压缩文件、CSS雪碧图以及部署CDN等等各种方法，但是今天不一样了，可能你去面试问的就是，请问你是否知道webpack的打包原理，webpack的打包优化方法有哪些？所以该说不说的，笔者闲着没事研究了一下webpack的打包优化，可能大家都有看过类似的优化文章~ 但是笔者还是希望能够给大家一些新的启发~
1、准备工作：测速与分析bundle
既然我们要优化webpack打包，肯定要提前对我们的bundle文件进行分析，分析各模块的大小，以及分析打包时间的耗时主要是在哪里，这里主要需要用到两个webpack插件，speed-measure-webpack-plugin和webpack-bundle-analyzer，前者用于测速，后者用于分析bundle文件。
具体配置
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const smp = new SpeedMeasurePlugin({ outputFormat:"human", }); module.exports = { configureWebpack: smp.wrap({ plugins: [ new webpack.ProvidePlugin({ $: "zepto", Zepto: "zepto", }), new BundleAnalyzerPlugin(), ], optimization: { splitChunks: { cacheGroups: { echarts: { name: "chunk-echarts", test: /[\\/]node_modules[\\/]echarts[\\/]/, chunks: "all", priority: 10, reuseExistingChunk: true, enforce: true, }, demo: { name: "chunk-demo", test: /[\\/]src[\\/]views[\\/]demo[\\/]/, chunks: "all", priority: 20, reuseExistingChunk: true, enforce: true, }, page: { name: "chunk-page", test: /[\\/]src[\\/]/, chunks: "all", priority: 10, reuseExistingChunk: true, enforce: true, }, vendors: { name: "chunk-vendors", test: /[\\/]node_modules[\\/]/, chunks: "all", priority: 5, reuseExistingChunk: true, enforce: true, }, }, }, }, }) }
由于是基于vue-cli脚手架的，所以其实vue-cli中已经帮你做了一些优化的工作，可以看到，原先项目最初的配置设置了splitchunk，进行代码分割，这在大型项目中是很有必要的，毕竟你不希望你的用户阻塞加载一个5MB大小的JS文件，所以做代码分割和懒加载是很有必要的。
说远了，我们来看看这个配置，你需要用smp对配置进行再包裹，因为SpeedMeasurePlugin会对你的其他Plugin对象包裹一层代理，这样的目的是为了能够知道plugin开始和结束的时间~
其次，BundleAnalyzerPlugin就跟普通的plugin一样，加载plugins数组的后面即可。
接下来我们看一下最初的打包时间以及包内容分析：
可以看到项目中较大的三个包，其中两个包是我们的第三方依赖，three.js、lottie、lodash、echarts等。
2、开始逐步优化
2.1缩小文件查找和处理范围
这是webpack优化中的常规操作，基本就是对模块和文件查找的优化，以及减少loader对一些不必要模块的处理，但是vue-cli中的loader并没有暴露给我们操作，所以其内置的loader处理无法由我们进行优化，但是其实vue-cli中的配置项已经对loader的查找路径进行了优化，如果你的项目也是使用了vue-cli，你可以通过以下命令行查看你现有的配置文件是怎样的：
npx vue-cli-service inspect > output.js
具体可以翻阅vuecli官方文档。
resolve:{ modules: [path.resolve(__dirname, 'node_modules')], alias:{ 'three':path.resolve(__dirname, './node_modules/three/build/three.min.js'), 'zepto$':path.resolve(__dirname, './node_modules/zepto/dist/zepto.min.js'), 'swiper$':path.resolve(__dirname, './node_modules/swiper/dist/js/swiper.min.js'), 'lottie-web$':path.resolve(__dirname, './node_modules/lottie-web/build/player/lottie.min.js'), 'lodash$':path.resolve(__dirname, './node_modules/lodash/lodash.min.js'), } }, module:{ noParse:/^(vue|vue-router|vuex|vuex-router-sync|three|zepto|swiper|lottie-web|lodash)$/ },
通过modules指定查找第三方模块的路径。
通过alias指定第三方模块直接查找到打包构建好的压缩js文件。
通过module指定noparse，对第三方模块不再进行分析依赖。
优化效果：2s？
可以看到时间就减少了两三秒，在30s波动，感觉没有多大差别。
2.2尝试使用happypack