Skip to main content

构建优化

构建优化​

官方优化建议：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

应用性能​

开发体验​

  • 构建进度显示

固有缺陷​

  • 代码转译属于 CPU 密集型。优化方法比如 esbuild-loader 替换 babel-loader ...