webpack并行构建示例：-编程知识

webpack并行构建示例：

由于js的单线程特性，文件和任务时要等待一个任务执行完成后执行下一个任务，但在实际开发中，很多任务是可以并行执行的（如同时处理多个不同js文件或同事压缩多张图片），一些loader和插件（thread-loader或happypack）提供了额外的并行处理能力

并行前
在这里插入图片描述

并行后
在这里插入图片描述

webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'main.js',},// mode: 'production', // 或者 'production'module: {rules: [{test: /\.js$/i,exclude: /node_modules/,use: [{  loader: 'thread-loader',  options: {  // 工作者数量，默认为 os.cpus().length - 1  // 当设置为`true`时，它会自动匹配主机上的CPU核心数  workers: 4, // 或者 true  // 持久化worker，防止重新生成  //   persistent: true,  // 传递给工作线程的loader上下文  // (默认: 传递给主线程的相同上下文)  // pool: {}  // 允许跨进程共享相同的node_modules  // 将极大地提升编译速度  // 默认为`true`  // 注意：启用此选项将禁用`pool.name`和`pool.path`  //   pool: {  //     type: 'shared',  //   },  // 当使用持久化工作线程时，设置超时时间（毫秒）  // 在空闲时杀死工作线程  // 默认为5000（5秒）  //   timeout: 2000,  // 传递给工作线程的额外选项  // (默认: 传递给主线程的相同选项)  // options: {},  },  },  {  loader: 'babel-loader', // 需要并行处理的loader  // ... 其他babel-loader配置  }, ]}]},
}