优化构建性能
- 使用更高版本的 Node.js 和 Webpack。
- 使用分析工具来定位耗时的插件和 loader。
- 如果生产环境不需要 source-map，可以关闭。
- 开发阶段开启热更新（结合 dev server 来使用）。
- 使用多线程：
happypack；thread-loader；有些插件或 Loader 自己有并行参数。
- 开启缓存：有些插件或 Loader 自己有缓存配置；
cache-loader；Webpack5 内置缓存机制。
- 采用 DLL 机制。
- 采用 External 机制，把对本地依赖的引用转移到 CDN 资源，一举多得。
优化打包体积
- 生产环境的构建开启代码压缩。
- 使用
webpack-bundle-analyzer 分析工具来分析各个依赖包的体积占用情况，再做进一步的精简或替换。
- SPA 开启路由分包懒加载。
- 如果开启分包，则需要把公共包打到 common chunk 里，避免重复打包。
- 业务代码使用 ESM，依赖包采用 ESM 版本，充分利用 tree-shaking。
- 依赖包随项目编译（后编译）。
- 使用
babel-plugin-component 把对大包的引用转换为对大包内模块的引用，实现按需引用。
- 使用
browserslist 声明目标浏览器，这样 @babel/preset-env 和 Autoprefixer 等工具就可以实现按需转译和 polyfill。
- 优化图片：图片压缩、转换为 Webp。
- 开启 scope hoisting 减少模块打包的冗余代码。
优化运行时性能
- 小图片通过 base64 内联到 CSS 代码中，减少 HTTP 请求。
- 合理配置文件名 hash，充分利用 CDN 缓存。