跳到主要内容

优化构建速度

  • 优化构建速度 【提升打包速度】

分析影响打包速度环节

  • 1、找到入口文件，分析内容
  • 优化解析时间
  • 2、找出所有模块依赖, 拿到依赖路径，转换代码
  • 优化搜索时间
  • 3、把所有的依赖模块输出源代码，把bundle.js输出到dist目录中
  • 把源代码进行压缩，通常 webpack 需要卡好一会，这是因为压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，打包就容易卡住。
  • 优化压缩时间。

优化解析时间 / 优化压缩时间 (开启多进程)​

  • webpack5内置terser-webpack-plugin插件，默认是启动多进程并行的，可以多进程执行代码压缩、提高构建速度,
  • thread-loader : 多进程方式运行资源加载

优化搜索时间​

缩小文件搜索范围，减少不必要的编译工作)

  • 优化 loader 配置
  • 优化 resolve.modules 配置
  • 优化 resolve.alias 配置
  1. 缩小搜索范围：指定 Webpack 只搜索特定的文件夹和文件，而不是整个项目。
  2. 使用缓存：在每次构建之间使用缓存可以显著缩短搜索时间
  3. 优化文件监听：文件监听是 Webpack 用来检测文件变化的机制。使用 webpack-dev-server 或 watch-mode 时，可以通过优化文件监听来加快搜索时间

优化二次打包时间 (利用缓存)​

  • 持久化缓存提高构建速度

持续化构建过程来说，第一次构建是一次全量构建，然后它会将相关产物序列化缓存在磁盘中(serialize)。后续构建具体流程可以依赖于上一次的缓存进行：读取磁盘缓存 -> 校验模块 -> 解封模块内容

  • 在webpack5之前，一般会使用cache-loader将编译结构写入磁盘缓存，或者使用babel-loader?cacheDirectory=true，设置babel编译的结果写进磁盘缓存。

  • webpack5新增的cache属性，会默认开启磁盘缓存【memory】，默认将编译结果缓存在 node_modules/.cache/webpack目录下。

  • 当设置 cache.type: "filesystem" 时，webpack 会在内部以分层方式启用文件系统缓存和内存缓存。 从缓存读取时，会先查看内存缓存，如果内存缓存未找到，则降级到文件系统缓存。 写入缓存将同时写入内存缓存和文件系统缓存。

wepback5开启缓存【持久化缓存】

js
module.exports = {
  // 持久化缓存配置
 cache: {
    // 将缓存类型设置为文件系统,默认是memory
    type: 'filesystem', 
    buildDependencies: {
      // 更改配置文件时，重新缓存
      config: [__filename]
    }
  },
  optimization: {
    // 值为"single"会创建一个在所有生成chunk之间共享的运行时文件
    runtimeChunk: 'single',
    moduleIds: 'deterministic',
  },
}

esbuild-loader提升构建速度​

  • esbuild-loader 是一个 Webpack 的 loader，可以使用 esbuild 作为 JavaScript 构建工具来加速构建速度
  • esbuild 是一个高性能的 JavaScript 构建工具，可以快速地处理 JavaScript 和 TypeScript 代码
  • 可以使用esbuild-loader替换babel-loader、ts-loader

可处理tsx/typescript/jsx/javascript 代码

esbuild-loader 可以自动检测 tsconfig.json文件

js
 module.exports = {
	 module: {
         rules:[
              test: /\.js$/, // /\.tsx?$/、/\.js$/
              loader: 'esbuild-loader',
              options: {
                 loader: 'jsx',  // tsx、jsx
                 target: 'es2015'
             }
         ]
     }  
 }

tree Shaking​

  • 可以去除未使用的模块