使用 happypack 提升 Webpack 项目构建速度
栏目: JavaScript · 发布时间: 5年前
内容简介:本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。也许会有所帮助。在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度
本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。也许会有所帮助。
Happypack 作用
在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。
而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
本文项目代码地址: webpack-happypack-demo
欢迎 Star!
Happypack 的使用
Happypack 只是作用在 loader 上,使用多个进程同时对文件进行编译。
安装
$ npm install happypack --save-dev 复制代码
使用(三步操作即可完成)
一、安装完成之后引入 HappyPack
webpack.config.js
const HappyPack = require('happypack'); module.exports = { ... } 复制代码
二、将常用的 loader
替换为 happypack/loader
webpack.config.js
const HappyPack = require('happypack'); module.exports = { ... module: { rules: [ test: /\.js$/, // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader // 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件 use: ['happypack/loader?id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] } } 复制代码
三、创建 HappyPack 插件
webpack.config.js
const HappyPack = require('happypack'); module.exports = { ... module: { rules: [ test: /\.js$/, // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader // 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件 use: ['happypack/loader?id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] }, plugins: [ ..., new HappyPack({ /* * 必须配置 */ // id 标识符,要和 rules 中指定的 id 对应起来 id: 'babel', // 需要使用的 loader,用法和 rules 中 Loader 配置一样 // 可以直接是字符串,也可以是对象形式 loaders: ['babel-loader?cacheDirectory'] }) ] } 复制代码
这样 Happypack 的使用就配置完了,运行项目,可以看到控制台打印如下提示:
Happy[babel]: Version: 5.0.1. Threads: 3 Happy[babel]: All set; signaling webpack to proceed. 复制代码
说明配置生效了。
Happypack
示例
使用单个 loader
时
上面的使用中就是单个 loader 时的配置,这里再写一次
exports.module = { rules: [ { test: /.js$/, use: 'happypack/loader?id=babel' } ] }; exports.plugins = [ new HappyPack({ id: 'babel', loaders: [ 'babel-loader?cacheDirectory' ] }); ]; 复制代码
使用多个 loader
时
exports.module = { rules: [ { test: /\.(css|less)$/, use: 'happypack/loader?id=styles' }, ] }; exports.plugins = [ new HappyPack({ id: 'styles', loaders: [ 'style-loader', 'css-loader', 'less-loader' ] }); ]; 复制代码
Happypack
配置项
-
id
:String
类型,对于happypack
来说唯一的 id 标识,用来关联module.rules
中的happypack/loader
-
loaders
:Array
类型,设置各种loader
配置,与module.rules
中loader
的配置用法一样
// 无配置时,可直接使用字符串形式 new HappyPack({ id: 'babel', loaders: ['babel-loader?cacheDirectory'] }) // 有配置项时,可以使用对象形式 new HappyPack({ id: 'babel', loaders: [ { loader: 'babel-loader', options: { cacheDirectory: true } } ] }) 复制代码
-
threads
:Number
类型,指示对应 loader 编译源文件时同时使用的进程数,默认是 3 -
threadPool
:HappyThreadPool
对象,代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多
// 创建一个 HappyThreadPool,作为所有 loader 共用的线程池 const happyThreadPool = HappyPack.ThreadPool({ size: 5 }); ... new HappyPack({ id: 'babel', loaders: [ { loader: 'babel-loader', options: { cacheDirectory: true } } ], threadPool: happyThreadPool }) 复制代码
-
verbose
: 是否允许happypack
输出日志,默认是true
-
verboseWhenProfiling
: 是否允许happypack
在运行webpack --profile
时输出日志,默认是false
-
debug
: 是否允许happypack
打印 log 分析信息,默认是false
个人总结
个人的一点小总结,不足以作为参考依据
-
在测试 Demo 或者小型项目中,使用
happypack
对项目构建速度的提升不明显,甚至会增加项目的构建速度 -
在比较复杂的大中型项目中,使用
happypack
才能看到比较明显的构建速度提升 -
因此,在使用
happypack
时请根据具体情况进行选择,如果反而延长了项目的构建速度,就没有必要使用happypack
以上所述就是小编给大家介绍的《使用 happypack 提升 Webpack 项目构建速度》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 在 Android Studio 里使用构建分析器提升构建性能
- 构建安全计划 提升应用程序安全能力
- Next.js 7发布,构建速度提升40%
- 使用 Webpack 的 DllPlugin 提升项目构建速度
- 探索webpack构建速度提升方法和优化策略
- 码云 Jenkins 插件更新 1.1.2 ,PR 构建能力提升
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。