webpack优化之happypack

Posted on | In | Visitors:
Words : 532 | Reading ≈ 2 min

上篇文章webpack优化之玩转代码分割和公共代码提取从代码维度出发，为生产环节进行了优化（通过提取公用代码减小打包结果体积，提升线上体验）。而在开发大型前端项目时，经过一段时间的开发维护和不断迭代，随着业务功能增多，就算提取了公共代码，项目体积仍会越来越大（如果不从产品层面优化，这是无法避免的），这意味着编译打包时间会越来越久、从修改代码到看到效果的等待时间越来越长。为了更好的开发体验，这次我们来为开发环节做一些事情。

How？

我们可以试试使用happypack。虽然这个包有点老了，作者也不怎么维护了（汗。。（因为他不怎么使用javascript了，他推荐了thread-loader，有空研究下）

Happypack

Happypack 是一个webpack插件，它可以帮助我们实现多线程打包，提升webpack打包性能，减少开发者等待打包的时间，从而提升开发体验，提高开发效率。

使用

Happypack的使用非常简单，只需3步：

  1. 安装happypack

    1
    npm i -D happypack

  2. 修改rules配置

    1
    2
    3
    4
    {
    	rest: /\.js$/,
    	use: 'Happypack/loader?id=js' //id用于在接下来的插件中引用，便于识别对谁进行多线程打包
    }

  3. 在webpack插件中 new happypack
    把原来在rules中配置的use参数放到happypack插件参数中。

    1
    2
    3
    4
    5
    6
    new Happypack({
    	id: 'js',
    	use :[{
    		loader: 'babel-loader'
    	}]
    })

最后大致长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Happypack = require('happypack');
module.exports = {
	mode: 'development',
	entry: xxx,
	output: xxx,
	module: {
		rules: [
			{
				rest: /\.js$/,
				use: 'Happypack/loader?id=js'
			}
		]
	},
	plugins: [
		new Happypack({
			id: 'js',
			use :[{
				loader: 'babel-loader'
			}]
		})
	]
}

如果还要对其他类型的文件进行多线程打包，可以继续替换和new就行（注意id的对应）。

happypack适用于比较大的项目，如果项目比较小，使用happypack可能会花更长时间，因为开线程需要消耗一些性能。

–
GOOD LUCK！