webpack优化实战
1 构建时间优化
构建时间越短，整体开发体验越好。
我们在开发环境引入了speed-measure-webpack-plugin用来测速
1.1 持久化缓存
开启持久化缓存可以大幅降低我们项目二次构建的时间，非常建议开启，建议使用filesystem，使用memory对于中大型项目会吃不消
1.2 sourcemap优化
使用webpack打包文件的时候，可以选择生成sourcemap文件。
按照社区推荐
- 建议在开发环境使用
eval-cheap-module-source-map，内联sourcemap，减少构建时间。
- 建议在生产环境使用
source-map，生成专门的.map.js文件，一般来讲根据具体需求删除或者移动sourcemap文件，增加代码被反编译的难度
1.3 watch优化
大部分项目中，node_modules的变换频率都是极低的，所以我们在使用watch功能的时候可以通过配置
ignored来忽略node_modules从而减少性能压力
1.4 在开发环境中使用style-loader
之前的QAPM项目中，不管是开发环境还是生产环境一开始都是通过MiniCssExtractPlugin生成css文件并引入页面的方式来使用css
然而这是不对的，一方面MiniCssExtractPlugin并对于热更新HMR支持的不是很好
（这里还有一个问题，开发环境配置hash会使得构建性能进一步下降）
我这里的解决方案是在开发环境中使用style-loader，这个loader作为webpack的入门级loader天然支持HMR并且简单易用，同时性能上也相对比较好。
1.5 TerserPlugin插件缓存
这个其实没啥好说的，记得把缓存打开，同时最好设定一定的exclude，比如去除node_modules
1.6 noParse优化
React已经为我们打包了生产环境需要使用的文件，这样可以跳过编译环节
1.7 Js加载优化
这里的优化点总结如下
- 使用thread-loader加快构建速度
- 为babel-loader开启缓存
- 通过
exclude排除node_module - 使用
react-refresh/babel为React项目添加热更新能力
2 打包体积优化
我们在生产环境构建的config文件中使用webpack-bundle-analyzer来分析打包体积
2.1 lodash优化
由于lodash是一个UMD规范的包，所以默认做的全量引入
我们可以通过LodashModuleReplacementPlugin来移除你未用到的lodash特性
2.2 moment优化
webpack 打包momentjs时会把所有语言包都打包，这样会使打包文件很大。此插件可以帮助我们只打包需··要的语言包，大大减小打包文件大小。
限定查找 moment/locale 上下文里符合 /zh-cn|en-gb/ 表达式的文件，只打包这几种本地化内容
2.3 CSS tree-shaking
通过PurgeCSS来进行CSS体积优化，CSS的作用原理是通过正则，所以建议使用PurgeCSS时一定要配置好白名单，同时保证选中所有的使用到样式文件类的地方。否则可能会丢失样式
2.4 splitChunks提取公共代码
SplitChunks插件是webpack中用来提取或分离代码的插件，主要作用是提取公共代码，减少代码被重复打包，拆分过大的js文件，合并零散的js文件
在webpack5中使用，我们可以根据实际情况进行拆包，从而减少构建体积。(一般拆一下node_modules)
对于这里的规则，将只说只说一些重点
minChunks：引用阈值，被引用次数超过该阈值的模块才会被拆包处理；maxInitialRequest/maxAsyncRequests：用于限制Initial/Async Chunk最大并行请求数，本质上是在限制最终产生的分包数量；minSize： 超过这个大小的 Chunk 会被拆包；maxSize： 超过这个大小的 Chunk 会尝试继续拆包；cacheGroups：缓存组规则，为不同类型的资源设置更有针对性的拆包策略。priority: 优先级，在缓存组规则中使用
2.5 gzip压缩
配置compression-webpack-plugin插件，生成额外的gzip静态文件
这种形式对于我们使用nginx的项目只需要简单开启gzip_static和gzip_proxied
如果使用CDN的话就要看服务商有没有提供相关功能