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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
详解RequireJs官方使用教程
2017/10/31 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
什么是python的自省
2020/06/21 Python
python中的yield from语法快速学习
2020/11/06 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
关于学习的决心书
2015/02/05 职场文书
污染环境建议书
2015/09/14 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers