webpack-构建优化

构建优化

官方优化建议：https://www.webpackjs.com/guides/build-performance/

构建速度

• 升级版本
• 缩小构建目标
  • 减少文件查找，可以减少匹配的文件后缀或缩小范围。比如 loader 匹配文件、resolve …
  • 合理使用 alias，提高第三方包查找效率
  • IgnorePlugin，比如 moment
• 开启缓存 cache 或 hardSourcePlugin/loader cache/ResolverCachePlugin/…
• 并行构建，thread-loader
• 并行压缩，terser-webpack-plugin
• ts 检查优化，使用额外进程检查或关闭检查（关闭后可以借助 vscode 插件检查代码）
• 减少使用多余的插件，比如 progressPlugin
• 检查自定义 loader/plugin

包体积

• tree shaking
• 分包，配合路由懒加载减小公共模块的重复打包
• 脚本外链分包、CDN
• 资源压缩，比如图像、脚本、样式文件、文档等
• 生产环境关闭 source-map

分包（splitChunks）

作用

• 提高首屏加载速度
• 更好地利用浏览器缓存

默认 chunk

• init chunk
• Async chunk（import (‘./’)）
• runtime chunk

最佳实践