webpack优化篇（四十三）：多进程/多实例构建：资源并行解析可选方案-阿里云开发者社区

webpack优化篇（四十三）：多进程/多实例构建：资源并行解析可选方案

2023-02-24 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： webpack优化篇（四十三）：多进程/多实例构建：资源并行解析可选方案

说明

玩转 webpack 学习笔记

可选方案

thread-loader
parallel-webpack
HappyPack

使用 HappyPack 解析资源

原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中

代码示例：

exports.plugins = [
  new HappyPack({
    id: 'jsx',
    threads: 4,
    loaders: ['babel-loader']
  })，
  new HappyPack({
    id: 'styles',
    threads: 2,
    loaders: ['style-loader', 'css-loader', 'less-loader']
  })
]

HappyPack 工作流程：

使用 thread-loader 解析资源

原理：每次 webpack 解析一个模块，threadloader 会将它及它的依赖分配给 worker 线程中

module.exports = smp.wrap({
  entry: entry,
  output: {
    path: path.join(_ dirname, 'dist'),
    filename: '[name ]_[chunkhash:8].js'
  }，
  mode: 'production',
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: ' thread- loader',
            options: {
              workers: 3
            }
          },
          ' babel- loader',
          // 'eslint- loader'
        ]
      },
    ]
  }
}

实战使用 happypack

https://github.com/amireh/happypack

安装

npm install --save-dev happypack

在使用之前我们先增加一些页面，提升效果更明显

然后在运行打包命令 npm run build

接下来使用 happypack

const HappyPack = require('happypack');
exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};
exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: ['babel-loader']
  })
];

然后在运行打包命令 npm run build，我们可以看到有 3 个线程

可以看到时间有了明显的下降

实战使用 thread-loader

注释掉 happypack 的代码，安装依赖：https://github.com/webpack-contrib/thread-loader

npm install --save-dev thread-loader

use: [
    {
        loader: 'thread-loader',
        options: {
            workers: 3
        }
    },
    'babel-loader',
    // 'happypack/loader',
    // 'eslint-loader'
]