多进程/多实例构建方案

多进程/多实例构建方案

Webpack 构建过程中，JavaScript 单线程的特性可能导致构建速度成为瓶颈。多进程/多实例方案通过并行处理任务显著提升构建效率。常见的实现方式包括 thread-loader、HappyPack 以及 Webpack 5 的 thread-loader 替代方案。

thread-loader 基础用法

thread-loader 将耗时的 loader 放在独立 worker 池中运行。安装后只需在 loader 链最前面添加：

npm install thread-loader --save-dev

配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 2,  // 启动2个工作进程
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

关键参数说明：

• workers: 工作进程数量（建议设为 CPU 核心数-1）
• workerParallelJobs: 每个 worker 并行执行任务数
• poolTimeout: 闲置进程池保持存活时间（毫秒）

HappyPack 实现方案

虽然已不再维护，但 HappyPack 仍可用于旧项目：

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length - 1 });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

Webpack 5 的持久缓存方案

Webpack 5 通过持久化缓存减少重复编译：

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  experiments: {
    backCompat: false  // 禁用兼容模式提升速度
  }
}

多实例并行构建

对于多页面应用，可用 parallel-webpack 实现并行构建：

// webpack.config.js
module.exports = [
  {
    entry: './pageA.js',
    output: { filename: 'pageA.bundle.js' }
  },
  {
    entry: './pageB.js',
    output: { filename: 'pageB.bundle.js' }
  }
]

运行命令：

npx parallel-webpack --config webpack.config.js

进程间通信优化

通过共享内存减少进程通信开销：

const { SharedArrayBuffer } = require('worker_threads');

// 主进程
const sharedBuffer = new SharedArrayBuffer(1024);
new Worker('./worker.js', { workerData: { buffer: sharedBuffer } });

// worker.js
const { parentPort, workerData } = require('worker_threads');
const sharedArray = new Int32Array(workerData.buffer);

性能对比实测

不同方案的构建时间对比（测试项目：2000个模块）：

常见问题排查

1. 内存泄漏：监控 worker 内存使用

setInterval(() => {
  console.log(`Worker memory: ${process.memoryUsage().heapUsed / 1024 / 1024}MB`);
}, 1000);

2. 进程卡死：添加超时机制

const { timeout } = require('promise-timeout');
timeout(workerPromise, 30000).catch(() => process.kill(worker.pid));

3. 负载不均：动态任务分配

class DynamicBalancer {
  constructor(workers) {
    this.queue = [];
    this.workers = workers.map(w => ({ busy: false, worker: w }));
  }
  
  dispatch(task) {
    const freeWorker = this.workers.find(w => !w.busy);
    if (freeWorker) {
      freeWorker.busy = true;
      freeWorker.worker.send(task, () => {
        freeWorker.busy = false;
        if (this.queue.length) this.dispatch(this.queue.shift());
      });
    } else {
      this.queue.push(task);
    }
  }
}

进阶配置技巧

1. 按需启用多进程：

const useThreads = process.env.NODE_ENV === 'production';
const jsLoaders = useThreads 
  ? ['thread-loader', 'babel-loader'] 
  : ['babel-loader'];

2. 自定义 worker 池：

const { WorkerPool } = require('workerpool');
const pool = WorkerPool({
  minWorkers: 'max',
  maxWorkers: require('os').cpus().length
});

// 在loader中调用
pool.exec('transform', [asset.source]).then(result => {
  callback(null, result.code);
});

3. 进程优先级控制：

# Linux系统
nice -n 10 webpack --progress

与其它优化手段结合

1. 配合缓存：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: { workers: 4 }
          },
          {
            loader: 'babel-loader',
            options: { cacheDirectory: true }
          }
        ]
      }
    ]
  }
}

2. 与 DLL 插件联用：

// webpack.dll.js
module.exports = {
  entry: { vendor: ['react', 'lodash'] },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(__dirname, '[name]-manifest.json')
    })
  ]
};

// webpack.config.js
new webpack.DllReferencePlugin({
  manifest: require('./vendor-manifest.json')
})