webpack升级性能优化

项目处于从jQuery 技术栈向公司自研 Vue 框架的迁移阶段。随着业务功能快速迭代，项目规模膨胀，构建与热更新效率显著下降：

Webpack3 导致构建速度较慢的原因可能包括以下几个方面：

INFO

单线程处理：Webpack3 主要依赖于单线程处理，这在多核 CPU 环境下效率较低，导致构建速度变慢。
缓存机制不够高效：Webpack3 的缓存机制相对较弱，每次构建时需要重新编译大量模块，特别是在大型项目中，这会显著增加构建时间。
Tree-shaking 支持有限：虽然-webpack3 支持 Tree-shaking，k3 支持 Tree-shaking，但实现不够完善，移除未使用代码的能力有限，导致构建后的 bundle 体积较大，从而影响构建速度。
模块解析较慢：Webpack3 在处理复杂的模块依赖关系时可能效率较低，尤其是在项目规模较大时，模块解析和依赖分析会耗费更多时间。
代码分割策略不够智能：Webpack3 在代码分割方面缺乏足够的优化，无法有效地将代码分割成更小的块，导致构建时需要处理更多的模块，从而减慢速度。综上所述，这些因素使得 Webpack3 在构建过程中效率较低，导致构建速度较慢。

INFO

缩小文件搜索范围：
- 配置resolve字段： 通过resolve.modules制定node_modules路径，避免多层查找;resolve.alias设置路径别名，直接引用库的压缩版。
- 限制resolve.extensions： 减少后缀列表长度，高频后缀优先。
- 使用modules.noParse： 排除无需解析的非模块化库。
开启缓存机制：
- Babel 缓存： 配置babel-loader?cacheDirectory=true,复用已转换的代码。
- HardSourceWebpackPlugin: 缓存模块到本地，显著提升二次构建速度。
- cache-loader: 缓存高耗时的Loader(如 Sass/Less)。
多线程并行处理：
- HappyPack/Thread-Loaderr: 将Loader任务分解为多线程处理（如 Babel 转换）。
- TerserWebpackPlugin多线程压缩： 启用parallel: true并行压缩 JS 代码。
预编译公共库：
- DllPlugin & DllReferencePlugin: 将第三方库(如 React、Lodash)打包为 DLL 文件，避免重复构建。

INFO

代码压缩：
- js 压缩: 使用terset-webpack-plugin支持 ES6 语法，开启多进程和缓存。
- css 压缩: optimize-css-assets-webpack-plugin结合cssnano优化。
- Gzip 压缩: compression-webpack-plugin预生成.gz,需要服务端支持。
tree Shaking：
- 按需引入： 使用 ES6 模块语法，生产环境默认启用。
- 配置 sideEffects： 在package.json中标记无副作用的文件(如 css)。
代码分割与按需加载：
- splitChunks: 提取公共代码(如第三方库)到独立chunk。
- 动态导入: 通过import()或者路由懒加载拆分代码，减少首屏体积。
资源优化:
- 图片压缩:image-webpack-loader自动压缩 PNG/JPEG，支持 WebP 转换。
- 擦除无用 CSS:purgecss-webpack-plugin移除未使用的 CSS 类。

INFO

热模块替换(HMR):
- 开发环境配置devServer.hot:true,实现局部模块更新，避免全量刷新。
Source Map 策略:
- 开发环境使用eval-source-map提升构建速度。
- 生产环境切换为source-map或关闭。
DevServer 优化
- 关闭inline模式,减少客户端注入代码量。
- 配置watchOptions忽视node_modules监听,减少内存占用。

INFO

升级 Webpack 和 Node 版本
- Webpack 4+ 默认启用Scope Hoisting(合并模块闭包)和Tree Shaking。
- 使用最新terser-webpack-plugin替代uglifyjs-webpack-plugin(支持 ES6)
分析工具
- Webpack Bundle Analyzer: 可视化分析打包体积,定位冗余依赖。
- Speed Measure Plugin: 统计各阶段耗时,针对性优化慢速环节。
环境分离
- 开发与生产配置分离,避免生产环境插件(如压缩)影响开发构建速度。