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']
	})
]
1
2
3
4
5
6
7
8
9
10
11
12

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'
				]
			},
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

实战使用 happypack

https://github.com/amireh/happypack

安装

npm install --save-dev happypack
1

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

然后在运行打包命令 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']
  })
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

实战使用 thread-loader

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

npm install --save-dev thread-loader
1

use: [
    {
        loader: 'thread-loader',
        options: {
            workers: 3
        }
    },
    'babel-loader',
    // 'happypack/loader',
    // 'eslint-loader'
]
1
2
3
4
5
6
7
8
9
10
11

然后在运行打包命令 npm run build，我们发现时间也有了明显的下降，