Webpack4 HappyPack增加编译进程数

2024-08-23 22:08
文章标签 编译 进程 增加 webpack4 happypack

本文主要是介绍Webpack4 HappyPack增加编译进程数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.HappyPack

在用Webpack构建项目时有大量文件需要解析和处理，构建过程是文件读写和计算密集型的操作（特别是当文件数量变多后），Webpack 构建慢的问题会显得严重。

运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。

文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

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

2.提升Webpack构建速度

1.新建一个项目

|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- index.html
|   |-- common.js
|   `-- main.js
`-- webpack.config.js

package.json

{"name": "testjsloader","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"@babel/core": "^7.5.5","@babel/preset-env": "^7.5.5","babel-loader": "^8.0.0-beta.0","css-loader": "^3.2.0","style-loader": "^1.0.0","webpack": "^4.35.3","webpack-cli": "^3.3.6","happypack": "^5.0.1"},"dependencies": {"jquery": "^3.4.1"}
}

1.分别安装了开发的依赖 和 生成的依赖包（ 本文主要是介绍：happypack 开发依赖包提升构建速度 ）

2.编写了2个打包的脚本

webpack.config.js

const path = require('path');
module.exports = {entry: ['./src/main.js'],output: {// 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )filename: 'bundle.js',// 2. 指定输出文件存放的目录（默认是dist目录）path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径},module: {rules: [{test: /\.js$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则exclude: /(node_modules|bower_components)/,use: [{loader: 'babel-loader',options: {// 2.使用bable,新语法转成es5语法presets: ['@babel/preset-env']}}],},{test: /\.css$/, // 注意：loaders 是use 的别名loaders: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {url: true,import: true}}], // 给css-loader传递参数 ?minimize}]}};

common.js

import $ from 'jQuery'
// 1.箭头函数 和 const 是es6新的语法。目的是要把es6新的语法转成es5语法
const showHelloWorld =(content) => {$('body').css({background:'pink'})
}
// 通过 CommonJS 规范导出 showHelloWorld 函数
module.exports = showHelloWorld;

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

2.打开终端，在项目的根目录执行：npm run dev 命令就可以开始打包

2.使用HappyPack提升构建速度

webpack.config.js

const path = require('path');
const HappyPack = require('happypack');
module.exports = {entry: ['./src/main.js'],output: {// 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )filename: 'bundle.js',// 2. 指定输出文件存放的目录（默认是dist目录）path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径},module: {rules: [{test: /\.js$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则exclude: /(node_modules|bower_components)/,// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例use: ['happypack/loader?id=babel'],},{test: /\.css$/, // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例use: ['happypack/loader?id=css'],}]},plugins: [new HappyPack({// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件id: 'babel',// 如何处理 .js 文件，用法和 Loader 配置中一样// 注意：loaders 是 use 的别名loaders: [{loader: 'babel-loader',options: {// 2.使用bable,新语法转成es5语法presets: ['@babel/preset-env']}}]// ... 其它配置项}),new HappyPack({id: 'css',// 如何处理 .css 文件，用法和 Loader 配置中一样loaders: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {url: true,import: true}}], // 给css-loader传递参数 ?minimize})]};

2.打开终端，在项目的根目录执行：npm run dev 命令就可以开始打包, 就会看到以下由 HappyPack 输出的日志：

PS F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程> npm run dev> testjsloader@1.0.0 dev F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程
> webpack --mode developmentHappy[babel]: Version: 5.0.1. Threads: 3
Happy[babel]: All set; signaling webpack to proceed.
Happy[css]: Version: 5.0.1. Threads: 3
Happy[css]: All set; signaling webpack to proceed.
.....
.....

说明你的 HappyPack 配置生效了，并且可以得知 HappyPack 分别启动了3个子进程去并行的处理任务。

3.指定HappyPack的子进程数

在new HappyPack ( { } ) 插件的时候，除了可以传入 id 和 loaders 两个参数外，HappyPack 还支持threads , threads 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。

webpack.config.js

const path = require('path');
const HappyPack = require('happypack');
module.exports = {entry: ['./src/main.js'],output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },module: {rules: [{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: ['happypack/loader?id=babel'],},{test: /\.css$/, use: ['happypack/loader?id=css'],}]},plugins: [new HappyPack({id: 'babel',loaders: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}],// ... 其它配置项threads: 5 // 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。}),new HappyPack({id: 'css',loaders: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {url: true,import: true}}],// ... 其它配置项threads: 5 // 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。})]};

2.打开终端，在项目的根目录执行：npm run dev 命令就可以开始打包, 就会看到以下由 HappyPack 输出的日志：

PS F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程> npm run dev> testjsloader@1.0.0 dev F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程
> webpack --mode developmentHappy[babel]: Version: 5.0.1. Threads: 5
Happy[babel]: All set; signaling webpack to proceed.
Happy[css]: Version: 5.0.1. Threads: 5
Happy[css]: All set; signaling webpack to proceed.

说明你的 HappyPack 配置生效了，并且可以得知 HappyPack 分别启动了5个子进程去并行的处理任务。

4.HappyPack共享子进程

在new HappyPack ( { } ) 插件的时候，除了可以传入 id , loaders 和 threads 参数外，HappyPack 还支持threadPool, threadPool 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。

webpack.config.js

const path = require('path');
const HappyPack = require('happypack');
// 构造出共享进程池，进程池中包含5个子进程
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });module.exports = {entry: ['./src/main.js'],output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },module: {rules: [{test: /\.js$/, exclude: /(node_modules|bower_components)/,use: ['happypack/loader?id=babel'],},{test: /\.css$/, use: ['happypack/loader?id=css'],}]},plugins: [new HappyPack({id: 'babel',loaders: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}],// ... 其它配置项threads: 5, // 使用共享进程池中的子进程去处理任务threadPool: happyThreadPool,}),new HappyPack({id: 'css',loaders: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {url: true,import: true}}], // ... 其它配置项threads: 5, // 使用共享进程池中的子进程去处理任务threadPool: happyThreadPool,})]};

打开终端，在项目的根目录执行：npm run dev 命令, 这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程> npm run dev> testjsloader@1.0.0 dev F:\blog\webpack-study\webpackCode\11-HappyPack增加编译进程
> webpack --mode developmentHappy[babel]: Version: 5.0.1. Threads: 5
Happy[babel]: All set; signaling webpack to proceed.
Happy[css]: Version: 5.0.1. Threads: 5
Happy[css]: All set; signaling webpack to proceed.

总结：

在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。

HappyPack 的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。

从前面的使用中可以看出所有需要通过 Loader 处理的文件都先交给了 happypack/loader 去处理，收集到了这些文件的处理权后 HappyPack 就好统一分配了。

每通过 new HappyPack() 实例化一个 HappyPack 其实就是告诉 HappyPack 核心调度器如何通过一系列 Loader 去转换一类文件，并且可以指定如何给这类转换操作分配子进程。

核心调度器的逻辑代码在主进程中，也就是运行着 Webpack 的进程中，核心调度器会把一个个任务分配给当前空闲的子进程，子进程处理完毕后把结果发送给核心调度器，它们之间的数据交换是通过进程间通信 API 实现的。

核心调度器收到来自子进程处理完毕的结果后会通知 Webpack 该文件处理完毕。

源码下载

这篇关于Webpack4 HappyPack增加编译进程数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1100626。

相关文章

Python中多线程和多进程的基本用法详解

Python中多线程和多进程的基本用法详解

《Python中多线程和多进程的基本用法详解》这篇文章介绍了Python中多线程和多进程的相关知识,包括并发编程的优势,多线程和多进程的概念、适用场景、示例代码,线程池和进程池的使用,以及如何选择合适... 目录引言一、并发编程的主要优势二、python的多线程（Threading）1. 什么是多线程？2.
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
linux进程D状态的解决思路分享

linux进程D状态的解决思路分享

《linux进程D状态的解决思路分享》在Linux系统中,进程在内核模式下等待I/O完成时会进入不间断睡眠状态（D状态）,这种状态下,进程无法通过普通方式被杀死,本文通过实验模拟了这种状态,并分析了如... 目录1. 问题描述2. 问题分析3. 实验模拟3.1 使用losetup创建一个卷作为pv的磁盘3.
阅读更多...
Linux环境变量&&进程地址空间详解

Linux环境变量&&进程地址空间详解

《Linux环境变量&&进程地址空间详解》本文介绍了Linux环境变量、命令行参数、进程地址空间以及Linux内核进程调度队列的相关知识,环境变量是系统运行环境的参数,命令行参数用于传递给程序的参数,... 目录一、初步认识环境变量1.1常见的环境变量1.2环境变量的基本概念二、命令行参数2.1通过命令编程
阅读更多...
Linux之进程状态&&进程优先级详解

Linux之进程状态&&进程优先级详解

《Linux之进程状态&&进程优先级详解》文章介绍了操作系统中进程的状态,包括运行状态、阻塞状态和挂起状态,并详细解释了Linux下进程的具体状态及其管理,此外,文章还讨论了进程的优先级、查看和修改进... 目录一、操作系统的进程状态1.1运行状态1.2阻塞状态1.3挂起二、linux下具体的状态三、进程的
阅读更多...
解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类，编译时
阅读更多...
python多进程实现数据共享的示例代码

python多进程实现数据共享的示例代码

《python多进程实现数据共享的示例代码》本文介绍了Python中多进程实现数据共享的方法,包括使用multiprocessing模块和manager模块这两种方法,具有一定的参考价值,感兴趣的可以... 目录背景进程、进程创建进程间通信 进程间共享数据共享list实践背景 安卓ui自动化框架，使用的是
阅读更多...
C#如何优雅地取消进程的执行之Cancellation详解

C#如何优雅地取消进程的执行之Cancellation详解

《C#如何优雅地取消进程的执行之Cancellation详解》本文介绍了.NET框架中的取消协作模型,包括CancellationToken的使用、取消请求的发送和接收、以及如何处理取消事件... 目录概述与取消线程相关的类型代码举例操作取消vs对象取消监听并响应取消请求轮询监听通过回调注册进行监听使用Wa
阅读更多...
maven 编译构建可以执行的jar包

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~ 专栏导航 Python系列: Python面试题合集，剑指大厂Git系列: Git操作技巧GO
阅读更多...
[Linux]：进程(下)

[Linux]：进程(下)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：Linux学习 贝蒂的主页：Betty’s blog 1. 进程终止 1.1 进程退出的场景 进程退出只有以下三种情况： 代码运行完毕，结果正确。代码运行完毕，结果不正确。代码异常终止（进程崩溃）。 1.2 进程退出码 在编程中，我们通常认为main函数是代码的入口，但实际上它只是用户级
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2