简介

优化

基本

• 使用高版本的 Webpack 和 Node.js
• 多进程/多实例构建：HappyPack(不维护了)、thread-loader
• 压缩代码
  • 多进程并行压缩
    • webpack-paralle-uglify-plugin
    • uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6)
    • terser-webpack-plugin 开启 parallel 参数
  • 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。
• 图片压缩
  • 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式)
  • 配置 image-webpack-loader
• 缩小打包作用域：
  • exclude/include (确定 loader 规则范围)
  • resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
  • resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)
  • resolve.extensions 尽可能减少后缀尝试的可能性
  • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
  • IgnorePlugin (完全排除模块)
  • 合理使用alias
• 提取页面公共资源：
  • 基础包分离：
    • 使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中
    • 使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件
• DLL：
  • 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。
  • HashedModuleIdsPlugin 可以解决模块数字id问题
• 充分利用缓存提升二次构建速度：
  • babel-loader 开启缓存
  • terser-webpack-plugin 开启缓存
  • 使用 cache-loader 或者 hard-source-webpack-plugin
• Tree shaking
  • 打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块，提高tree shaking效率
  • 禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking
  • 使用 PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码
    • purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)
• Scope hoisting
  • 构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销变大**。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突**
  • 必须是ES6的语法，因为有很多第三方库仍采用 CommonJS 语法，为了充分发挥 Scope hoisting 的作用，需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法
• 动态Polyfill
  • 建议采用 polyfill-service 只给用户返回需要的polyfill，社区维护。 (部分国内奇葩浏览器UA可能无法识别，但可以降级返回所需全部polyfill)

更多优化请参考官网-构建性能 (opens new window)

分类统计

开发环境

• HRM (热替换)
• webpack-dev-server （本地服务器）
• soure-map （调试）
• webpack-bundle-analyzer（打包生成代码块分析视图）
• size-plugin（监控打包资源的体积变量化）
• speed-measure-webpack-plugin（分析loader和plugin打包的耗时）

生产环境

体积优化【要点】

• html压缩 （html-webpack-plugin ）
• js压缩 （production模式自动开启）
• css压缩 （optimize-css-assets-webpack-plugin）
• css提取（mini-css-extract-plugin）
• externals （排除不需要被打包的第三方）
• tree-shake ( production模式自动开启(webpack4限EsModule;webpack5不限EsModule,CommonJs,优秀得很) )
• import(懒加载，预加载（预加载慎用））
• code-split ( optimization )

打包速度优化

• exclude / exclude (排除一些不需要编译的文件)
• module.noParse (排除不需要被loader编译的第三方库)
• babel缓存（ 缓存cacheDirectory ）
• 多线程打包（thread-loader 、happyPack）
• 动态链 （ DLL ）

相关链接

Webpack优化——将你的构建效率提速翻倍 - 掘金 (juejin.cn) (opens new window)

使用 happypack 提升 Webpack 项目构建速度 - 掘金 (juejin.cn) (opens new window)