笔记

Appearance

大纲

性能优化 ​

项目的增大可能会导致 webpack 启动和构建的时间增长到影响开发和发布的效率

优化 webpack 开发构建速度即减少 webpack 处理无意义的工作

减少构建范围 ​

缩小解析范围 ​

通过配置 resolve，提高解析文件路径时的效率

js
const path = require("path");
const getResolvePath = p => path.resolve(__dirname, p);
module.exports = {
  resolve: {
    // 使用绝对路径减少模块路径查询
    modules: [
      getResolvePath("node_modules"),
      getResolvePath("my_packages"), // 假设使用了自定义模块
    ],
    // 减少扩展文件后缀查询，其他文件使用完整文件名引入
    extensions: [".js", ".ts", ".json"],
    // 若不使用
    symlinks: false,
  },
};

缩小 loader 匹配的范围，减少不必要的匹配

  • 使用 include 缩小匹配范围
  • 使用 exclude 减少匹配内容

忽略指定模块 ​

使用 IgnorePlugin 插件忽略无需构建的模块

js
/**
 * new webpack.IgnorePlugin(requestRegExp, [contextRegExp]);
 * - `requestRegExp`: 匹配(test)资源请求路径的正则表达式
 * - `contextRegExp`: 可选, 匹配(test)资源上下文(目录)的正则表达式。
 */
// 示例
module.exports = {
  // ...others
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/);
  ]
}

提升处理性能 ​

thread-loader ​

TODO: 利用多线程加速 loader 执行的 loader

js
const threadLoader = require("thread-loader");
threadLoader.warmup(
  {
    // options
  },
  [
    // loaders
  ]
);

Dlls ​

使用 DllPlugin 对修改频率低的代码(通常是第三方库)单独编译, 该插件会生成 manifest.json 文件

js
const webpack = require("webpack");
module.exports = {
  plugins: [
    new webpack.DllPlugin({
      name: "vendors_[name]_[hash]",
      path: path.resolve(__dirname, "dist/manifest.json"),
    }),
  ],
};

针对具体环境 ​

开发环境 ​

提高编译速度 ​

  • 使用 webpack-dev-server、webpack-hot-middleware 或 webpacl-dev-middleware 在内存中编译
  • 设置 devtool: cheap-module-eval-source-map 以减少 Source Map 开支
  • webpack4 使用 stats.toJson 输出大量数据, 避免访问 stats 对象的内容
  • 使用 ts-loader 时, 配置 transpileOnly: true 和 experimentalWatchApi: true 提高构建速度

减少处理内容 ​

  • 最小化入口 chunk
  • 避免额外的优化, 避免在生产环境中使用的工具
    • UglifyJsPlugin
    • ExtractTextPlugin
    • [hash]/[chunkhash]
    • AggressiveSplittingPlugin
    • AggressiveMergingPlugin
    • ModuleConcatenationPlugin
  • 设置 output: pathinfo: false 使输出文件不携带路径信息

生产环境优化 ​

生产环境中对性能的要求远小于对程序质量的要求, 通常不做过多优化

  • 多个编译时
    • parallel-webpack: 用于开启一个 worker
    • cache-loader: 缓存可以在多个编译时之间共享
  • source map: 不使用或使用 cheap-module-source-map (注意不应当让用户访问)

提高项目质量 ​

更新工具版本 ​

  • 保持 webpack 的较新版本
  • 保持 npm 的较新版本
  • 保持 node 的较新版本, 注意 node 8.9.10 - 9.11.1 存在性能回退问题, 应避免使用

优化项目资源 ​

  • 使用更少的库
  • 移除废弃代码

优化构建流程 ​

  • 拆分构建步骤：代码、资源分批构建
  • 拆分项目代码：对项目业务进行拆分