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

最新推荐文章于 2025-07-11 14:06:50 发布

原创最新推荐文章于 2025-07-11 14:06:50 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

Webpack / Rollup / Vite 专栏收录该内容

78 篇文章

订阅专栏

本文详细介绍了如何在Webpack中通过HappyPack和thread-loader实现模块解析的并行处理，展示了如何配置和使用这两个工具来提升打包效率。通过实战演示，对比了HappyPack的工作流程和thread-loader的使用，以帮助开发者理解和应用这些优化技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

玩转 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'
]