Webpack 优化

返回 相关私有笔记 · 相关私有笔记

从两个角度，分别考虑

• 开发环境：我们需要的是更快的构建速度、HMR、更友好的 source map
• 生产环境：更小的体积、稳定且快的性能

优化 Webpack 配置

通用

• 使用高版本的 Webpack 和 Node.js
• 多进程构建：thread-loader
• 不同环境使用不同 Webpack 配置文件
  • 使用 webpack-merge 分别配置 development / production / test 环境
• ❓ 动态 Polyfill
• 使用 webpack 的 tree shaking
• 缩小文件的搜索范围
  • 优化 loader 配置：可以通过 test / include / exclude 来指定文件的 loader 命中的文件范围
  • 优化 resolve.modules 配置：用于指定 Webpack 去哪些路径下寻找第三方模块
    • 例如当所有第三方模块都放在 node_modules 时，可以配置 resolve: {modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']}
  • 优化 resolve.mainFields 配置：用于配置第三方模块使用哪个入口文件
    • 为了减少搜索范围，可以使用 resolve: {mainFields: ['main']}
    • 如果想优先使用 ESModule 版本的话，设置 resolve: {mainFields: ['jsnext:main', 'main']}
  • 配置 resolve.alias：resolve.alias 通过别名将原导入路径映射成一个新的导入路径
  • 配置 resolve.extensions：引入文件时省略数组内的后缀名
  • 配置 resolve.noParse：省略对指定文件的处理（如 jQuery 等大型库），可以提高构建性能（被忽略的文件不能包含导入语句如 require / import / define）
• 使用可视化工具来分析性能
  • 使用 UnusedWebpackPlugin 分析未被使用到的文件
  • 使用 Webpack Dashboard 以命令行的形式输出编译过程的各种信息
  • 使用 Webpack Bundle Analyzer 分析重复的模块或者没被用到的模块
  • 使用 --json=stats.json 将构建过程中的信息都输出到指定文件
  • 使用 Webpack Analysis：官方提供的可视化分析工具

开发环境

• 使用 HMR
• 设置 devtool 为 cheap-eval-source-map，在保证构建效率的同时又能进行代码调试
• 使用缓存构建
  • 配置 cache: {type: 'filesystem'} 开启构建缓存，可以大幅提高二次构建的速度

生产环境

• CDN 加速
  • 通过 output.publicPath 设置 JavaScript 文件地址
  • 通过 WebPlugin.stylePublicPath 设置 CSS 文件的地址
  • 通过 css-loader.publicPath 设置被 CSS 导入的资源的地址
• 提取公共代码
  • [[03 - 前端 Frontend/前端工程化 Frontend Engineering/Webpack#[分包策略](https //juejin.cn/post/6844904103848443912)|分包策略]]
  • 使用 SplitChunksPlugin 提取公共代码，减少代码体积
• 代码压缩
  • 使用 terser-webpack-plugin 压缩 ES6 代码
  • 使用 ParallelUglifyPlugin 多进程压缩代码
  • 使用 css-minimizer-webpack-plugin、cssnano 对 CSS 代码进行压缩
  • 使用 html-minimizer-webpack-plugin 压缩 HTML 代码
• 使用 scope hoisting 合并模块：Scope Hoisting 用于将符合条件的多个模块合并到同一个函数空间中，从而减少产物体积，优化性能
  • 开启方法：
    • mode = 'production' 开启生产模式
    • 使用 optimization.concatenateModules 配置项
    • 使用 ModuleConcatenationPlugin 插件
• 使用 DllPlugin：使用 DllPlugin 进行分包，使用 DllReferencePlugin 引用 manifest.json，通过将一些很少变动的代码先打包成静态资源，避免重复编译来提高构建性能

reference：

1. 首屏优化加载