webpack HappyPack实战详解


Posted in Javascript onOctober 08, 2019

由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。

我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。

提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。

安装 HappyPack

npm i -D happypack

运行机制

webpack HappyPack实战详解

使用 HappyPack

修改你的webpack.config.js 文件

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
    loader: 'happypack/loader?id=happyBabel',
    //排除node_modules 目录下的文件
    exclude: /node_modules/
   },
  ]
 },
plugins: [
  new HappyPack({
    //用id来标识 happypack处理那里类文件
   id: 'happyBabel',
   //如何处理 用法和loader 的配置一样
   loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
   }],
   //共享进程池
   threadPool: happyThreadPool,
   //允许 HappyPack 输出日志
   verbose: true,
  })
 ]
}
  1. 在 Loader 配置中,所有文件的处理都交给了 happypack/loader 去处理,使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
  2. 在 Plugin 配置中,新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应,选项中的 loaders 属性和 Loader 配置中一样。

HappyPack 参数

  • id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件.
  • loaders: Array 用法和 webpack Loader 配置中一样.
  • threads: Number 代表开启几个子进程去处理这一类型的文件,默认是3个,类型必须是整数。
  • verbose: Boolean 是否允许 HappyPack 输出日志,默认是 true。
  • threadPool: HappyThreadPool 代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多。
  • verboseWhenProfiling: Boolean 开启webpack --profile ,仍然希望HappyPack产生输出。
  • debug: Boolean 启用debug 用于故障排查。默认 false。

总结

如果想详细了解happypack的原理 可以看这篇文章
happypack 原理解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 #Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 #Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 #Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 #Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
You might like
遭遇php的in_array低性能问题
2013/09/17 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js 函数的副作用分析
2011/08/23 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python延时操作实现方法示例
2018/08/14 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
如何使用python代码操作git代码
2020/02/29 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
授权委托书范文
2014/07/31 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL