webpack优化之HappyPack实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。
我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。
安装 HappyPack
npm i -D happypack
运行机制
HappyPack_Workflow.png
使用 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,})]
}
- 在 Loader 配置中,所有文件的处理都交给了
happypack/loader
去处理,使用紧跟其后的 querystring?id=babel
去告诉happypack/loader
去选择哪个 HappyPack 实例去处理文件。 - 在 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
。
https://www.jianshu.com/p/b9bf995f3712
webpack优化之HappyPack实战相关推荐
- vue项目中使用 webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
- webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
- vue webpack优化之HappyPack 实战
安装 HappyPack cnpm i -D happypack webpack.base.conf.js const HappyPack = require('happypack'); const ...
- 20、webpack优化(5)——happyPack多线程打包
happyPack多线程打包 如何实现多线程打包? 安装happypack npm i happypack 改造webpack.config.js,实现多线程打包js let HappyPack = ...
- webpack优化 -- happypack
webpack优化 -- happypack 前言:happypack是一个可以开启多线程转换loader的插件,可以在开发环境下提高编译速度,下面用vue-cli 2.x配合happypack优化一 ...
- 深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
- GitChat · 前端 | Webpack 工程的 PWA 实战
GitChat 作者:Jrain'L 原文:Webpack 工程的 PWA 实战 关注微信公众号:GitChat 技术杂谈 ,一本正经的讲技术 前言 在现代化的前端开发中,webpack已经成为了标配 ...
- Webpack优化总会让你不得不爱
在家的日子不能出去玩,不能出去吃,的确是很不开心的,不过也是真的增加了好多空闲时间 与其在家呆着无聊,不如安安静静的学习一下 疫情期间,不管怎样,心态不能崩,武汉加油,中国加油 闲言少叙,现在我们就开 ...
- 【优化】1288- 分享我的webpack优化经验,首屏渲染从9s到1s
今天给大家分享一篇性能优化实战.本文基于vue2(虽然vue3已出,但是本文也很实用) 谈到webpack优化大部分人可能都看腻了,无非就那几招嘛,我之前也是看过许多类似的文章,但都没有自己真正上手过 ...
最新文章
- htcd816+android密码,HTC Desire 816刷机解锁教程
- 在CentOS/Debian/Ubuntu上编译安装最新版 GCC 8 , cmake 3 和ninja
- Android——GridLayout
- LintCode 69---二叉树的层次遍历
- java 初始化duration_JAVA 8 DURATION 详解
- VC++ Tab Control控件的使用
- Tricks(十七) —— 数组与字典(map)
- Effective C++ -----条款50:了解new 和delete 的合理替换时机
- 广电光猫超级管理员账号及光猫改桥接模式教程
- Java类加载机制由浅入深
- c程序-RGB转十六进制
- JavaScript系列(1)初体验-弹出HelloWord
- 清除电脑bios密码
- 斜杠【/】 与 反斜杠【\】
- 如何在Word,excel 中打钩和打叉?
- Linux PXE无盘工作站
- js获取指定字符后面的字符
- 智伴机器人tf卡下载地址_入门操作详解教你如何玩转智伴1X机器人!
- 互联网公司招聘--网易--网易云音乐程序员--2017年笔试题
- cpu的核数和进程_CPU与核心及进程和线程认识
热门文章
- Python实现傅里叶变换:图像频域分析和处理
- arcgis风向_数据可视化之风向图
- 语音信号处理论文优选:神农Shennong: a Python toolbox for audio speech features extraction​
- 微生物组-宏基因组分析(线上开课,2021.1)
- 基于JAVA水果销售管理网站计算机毕业设计源码+系统+mysql数据库+lw文档+部署
- excel自动生成代码_1
- Jenkins代码审查
- 项目基础信息概况一览表
- 大班下学期家长会流程
- Homebrew 安装及更新软件