Webpack4 HappyPack增加编译进程数

最新推荐文章于 2024-08-13 08:27:07 发布
最新推荐文章于 2024-08-13 08:27:07 发布
阅读量4k 收藏 6
点赞数 2
分类专栏： 构建工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/100775406
版权

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 development

Happy[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 development

Happy[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 development

Happy[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 该文件处理完毕。

源码下载

LiuJun2Son
关注
专栏目录
深入了解webpack4基本配置及优化
qq_45157197的博客
04-12 1095
1.初识webpack Webpack简介 webpack是什么 *Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。 在Webpack看来，前端的所有资源文件（js/ css/ sass/ less/ img/ ,,,）都会作为模块处理 它将格局模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。* webpack能干什么 代码转换...
使用 happypack 提升 Webpack 项目构建速度
热门推荐
浮沉半生的博客
03-05 1万+
本文简单介绍了 Happypack 的简单使用，不了解的同学可以进来看一看。也许会有所帮助。 Happypack 作用 在使用 Webpack 对项目进行构建时，会对大量文件进行解析和处理。当文件数量变多之后，Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的任务要一个一个进行操作。 而 Happypack 的作...
HappyPack not work in webpack 4
Yang Yong 的博客
09-06 1284
问题描述： 在webpack4版本使用happypack会出现以下错误： if (resolve.length === 4) { ^ TypeError: Cannot read property 'length' of undefined at resolveLoader (...\node_modules\happypack\lib\Webpack...
HappyPack：加速你的Webpack构建
最新发布
gitblog_00550的博客
08-13 416
HappyPack：加速你的Webpack构建 happypackHappiness in the form of faster webpack build times.项目地址:https://gitcode.com/gh_mirrors/ha/happypack 项目介绍 HappyPack 是一个开源项目，旨在通过并行处理文件转换来加速 Webpack 的初始构建过程。尽管维护者目前将其置...
看完这篇你一定懂 --- Webpack4 打包优化
小柒的前端之旅
03-28 2698
前面的话 Webpack升级4之后，小柒踩过的很多坑，这篇文章总结Webpack4的一些新特性，以及常见的优化方式。 Webpack4 新特性 不再强制需要webpack.config.js配置文件。默认入口为./src/index.js，默认输出./dist目录，输出文件main.js Webpack不再能单独使用，4.x版本的很多命令都移动到了webpack-cli中。所以必须安装we...
拥抱webpack4，有效缩减构建时间57%+
前端原创分享，常年坚持记录和分享，全网阅读量超百万
09-11 898
最近有感觉到，随着系统模块数量的增加，wepack编译打包的速度越来越慢，于是我想给项目做一下优化升级，也借此机会系统地学习一下webpack4。
【webpack】webpack4带来的新特性
Liz's blog hut.
11-19 363
一、webpack4不是必须要有配置文件 默认入口点：./src/index.js 默认输出模块包：./dist/main.js 若要覆盖以上默认配置，则"scripts"中进行配置。如： "build": "webpack -mode production ./enout/index.js --output ./enout/main.js" 二、production/development...
webpack 3.x 升级 webpack 4.x Vue项目打包速度(体积)优化步骤
胖达的博客
08-03 481
①happypack多线程执行 webpack执行预处理文件时单线程的，我们可以使用happypack来多线程处理文件。 安装 npm i happypack -S -D 修改./build/webpack.base.js文件 const HappyPack = require('happypack'); const os = require('os'); const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length
Webpack打包和优化
aliyun3的博客
04-19 3455
webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。 大小优化 1.CommonsChunk 前端构建项目中，为了提高打包效率，往往将第三库与业务逻辑代码分开打包，因为第三方库往往不需要经常打包更新。webpack建议使用CommonsChunk 来单独打包第三方库： module.exports = { entry: { vendor: ['react','react-dom'], app: "./main", }, .
加速Webpack构建技巧总结
09-30
配置完成后，每次Webpack构建时，HappyPack插件会输出日志，显示它已启动的子进程数。 ### 使用ParallelUglifyPlugin进行JavaScript代码压缩 在Webpack构建流程中，代码压缩也是一个耗时的步骤。...
初探webpack4
自然醒
06-10 5345
一、前言 2018/2/25，webpack4正式发布，距离现在已经过去三个多月了，也逐渐趋于稳定，而且现在的最新版本都到了4.12.0（版本迭代快得真是让人害怕）。 很多人都说webpack复杂，难以理解，很大一部分原因是webpack是基于配置的，可配置项很多，并且每个参数传入的形式多种多样（可以是字符串、数组、对象、函数。。。），文档介绍也比较模糊，这么多的配置项各种排列组合，想想都...
webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍
阿牛哥的博客
04-26 991
webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍
Webpack4 搭建项目初试
UnderIcon的博客
06-12 506
what is webpack？webpack可以看做一个模块化打包机，分析项目结构，处理模块化依赖，转换成为浏览器可运行的代码。初始化项目// 这里不做过多描述 npm init新建src文件夹，并新建index.js，随便写几行js。安装webpackwebpack4.0以上抽离出了webpack-cli,所以我们需要下载2个依赖(npm i -D 是 npm install --save-d...
webpack4优化学习
我是渣渣
12-14 1315
libraryTarget 和 library 当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们 output.libraryTarget 配置以何种方式导出库 output.library 配置导出库的名称 output.libraryTarget 是字符串的枚举类型，支持以下配置 var (默认) 编写的库将通过var被赋值给通过library指定名称的变量。 in...
webpack----webpack4尝鲜
前端疯
03-31 580
## 安装v4.0.0-beta.0 yarn add webpack@next webpack-cli --dev 或者 npm install webpack@next webpack-cli --save-dev 测试例子 创建文件： 运行结果： 哪些新特性 1 不在需要设置配置文件（如上例子） 默认入口文件为./src 默认输出文件为./dist ...
1. webpack打包速度的优化----happyPack
zw_wen的博客
09-15 689
webpack打包优化的目的 (1). 使打包的体积更小； (2). 使打包的速度更快； 1. 如何使打包的速度更快: (1). 用happypack提升项目的构建速度；happypack只作用在loader上，使用多个进程同时对文件进行编译处理； 比如：用babel-loader处理js类型的文件时， 可忽略node_modules文件夹；并且对该loader使用happypack处理； happypack使用的步骤： a. 安装happypack插件： npm install happy
webpack多进程打包方案
lamianT的博客
03-17 1516
webpack多进程打包方案
webpack4.41+性能优化（高级篇）
卓越无关环境，保持空杯心态——靡不有初，鲜克有终
07-19 2007
以下配置是在webpack 4.43.0测试，文章末尾给出devDependencies 可用于生产环境： babel-loader缓存优化 ignoreplugin noparse happyPack ParallelUglifyPlugin 不可用于生产环境的： 自动刷新 热更新 DllPlugin babel-loader的缓存优化 module: { rules: [ { test: /\.js$/, .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值