Webpack优化相关总结

前言：本文按照Webpack配置项的顺序列举，更方便记忆

---

1.mode为production

1. 关闭source-map
2. js文件压缩
3. tree shaking 通过es6的import静态引入分析去除无用代码
4. scope hoisting 提升作用域（合并代码），减少函数执行上下文（EC）的生成

2.resolve

1.resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
2.resolve.extensions 尽可能减少后缀尝试的可能性
3.resolve.alias 配置别名降低import语句冗余性

3.modules

1.loader配置exclude/include缩小处理范围
2.noParse不去分析没有模块化的单独依赖（jquery，lodash）
3.cache-loader去缓存处理结果，开启babel缓存
4.MiniCssExtractPlugin.loader分离css文件，减少js文件体积
5.url-loader小图片转base64
6.image-webpack-loader压缩图片
7.happypack开启多进程打包（把IO操作分担给别的进程从而加速）

4.optimization

1.SplitChunks（webpack3中是CommonsChunkPlugin）提取第三方代码，分割多份利用http并线请求，分离业务代码
2.设置runtimeChunk提取各模块之间引用关系形成单独文件

5.output

1.通过设置hash，chunkhash，contenthash来给浏览器缓存

6.externals

1.不打包指定依赖，html文件里通过cdn的形式引入

7.plugin（这部分特别广）

1.SpeedMeasurePlugin观察loader和plugin占用时长分析
2.BundleAnalyzerPlugin启动一个web页面分析各模块的打包状况
3.html-webpack-plugin压缩html，去除注释
4.dll动态链接库把第三方代码提前打包，再打包业务代码时在引入
5.OptimizeCssAssetsPlugin压缩、优化css代码
6.TerserWebpackPlugin压缩js代码（相比production的优势是可手动配置）
7.IgnorePlugin不打包某些文件，例如moment库的local文件夹，需要指定语言在入口自行导入
8.UglifyJsPlugin、ParallelUglifyPlugin开启多进程

Vue优化

1、v-for 正确设置key值
2、封装复用的模块（http请求）、组件（ui库）
3、路由懒加载：component：() = import(./xxx.vue)
4、productionSourceMap: false
5、启用gzip压缩，打包体积更小
6、keep-alive 缓存不活跃组件
7、插件CDN方式引入，减小项目体积
8、图片使用CDN地址，图片懒加载