如何去提升 Webpack 构建速度

[wangjing]

前端的大部分的构建工具都是 nodejs 编写, 而 nodejs 使用语言是我们熟悉的 javascript . 通常大家会发现随着我们项目体积增大随着发现编译、打包速度会降低, 为什么? 因为 JS 是单线程的, 所有打包构建的过程同一时刻只能处理单个文件.

如何利用系统资源提高打包速度 ? 并行

HappyPack

HappyPack 允许并行处理文件从而提供构建速度.

如何工作的 ?

HappyPack 位于 webpack 和资源文件(eg. JS 文件)之间，当 webpack 解析一个模块时，HappyPack 就会获取它和它所有的依赖项，并将这些文件分发到多个工作线程中.

使用

var HappyPack = require('happypack');

module.exports = {
    // other config...
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'happypack/loader?id=ts'
            }
        ]
    },
    plugins: [
        new HappyPack({
            id: 'ts',
            threads: 2,
            loaders: [
                {
                    path: 'ts-loader',
                    query: { happyPackMode: true }
                }
            ]
        }),
    ]
};

thread-loader + cache-loader

相比 happyPack , 使用 thread-loader 和 cache-loader 配置起来更简单.

如何工作的?

thread-loader 是基于 worker pool , 每个 worker 都是一个独立 nodejs 进程.

每个进程启动大概需要 600ms 左右，其次进程之间通信存在消耗.

建议只在合理地方使用该 loader.

使用

下面看看简单的使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          'cache-loader',
          'thread-loader',
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
};

由于进程的启动需要时间, thread-loader 提供了预热的功能, 减少启动耗时.

预热

const threadLoader = require('thread-loader');
threadLoader.warmup(
  {
    // pool options, like passed to loader options
    // must match loader options to boot the correct pool
  },
  [
    // modules to load
    // can be any module, i. e.
    'babel-loader',
    'babel-preset-es2015',
    'sass-loader',
  ]
);

其它一些详细配置参考官方文档.

总结

• HappyPack 基于多线程, 运行并行处理文件从而提供构建速度
• thread-loader 基于 node process 去并行处理文件,由于启动进程花费时间其次进程间通信也存在消耗, 建议把该 loader 用在昂贵的操作中(eg. babel-loader 、vue-loader).