使用 happypack 提升 Webpack 项目构建速度

栏目: JavaScript · 发布时间: 5年前

内容简介:本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。也许会有所帮助。在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度

本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看。也许会有所帮助。

Happypack 作用

在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。

而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度

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

本文项目代码地址: webpack-happypack-demo

欢迎 Star!

Happypack 的使用

Happypack 只是作用在 loader 上,使用多个进程同时对文件进行编译。

安装

$ npm install happypack --save-dev
复制代码

使用(三步操作即可完成)

一、安装完成之后引入 HappyPack

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
}
复制代码

二、将常用的 loader 替换为 happypack/loader

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
    module: {
        rules: [
            test: /\.js$/,
            // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
            // 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            // 排除 node_modules 目录下的文件
            exclude: /node_modules/
        ]
    }
}
复制代码

三、创建 HappyPack 插件

webpack.config.js

const HappyPack = require('happypack');

module.exports = {
    ...
    module: {
        rules: [
            test: /\.js$/,
            // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
            // 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            // 排除 node_modules 目录下的文件
            exclude: /node_modules/
        ]
    },
    plugins: [
        ...,
        new HappyPack({
            /*
             * 必须配置
             */
            // id 标识符,要和 rules 中指定的 id 对应起来
            id: 'babel',
            // 需要使用的 loader,用法和 rules 中 Loader 配置一样
            // 可以直接是字符串,也可以是对象形式
            loaders: ['babel-loader?cacheDirectory']
        })
    ]
}
复制代码

这样 Happypack 的使用就配置完了,运行项目,可以看到控制台打印如下提示:

Happy[babel]: Version: 5.0.1. Threads: 3
Happy[babel]: All set; signaling webpack to proceed.
复制代码

说明配置生效了。

Happypack 示例

使用单个 loader

上面的使用中就是单个 loader 时的配置,这里再写一次

exports.module = {
    rules: [
        {
            test: /.js$/,
            use: 'happypack/loader?id=babel'
        }
    ]
};

exports.plugins = [
    new HappyPack({
        id: 'babel',
        loaders: [ 'babel-loader?cacheDirectory' ]
    });
];
复制代码

使用多个 loader

exports.module = {
    rules: [
        {
            test: /\.(css|less)$/,
            use: 'happypack/loader?id=styles'
        },
    ]
};

exports.plugins = [
    new HappyPack({
        id: 'styles',
        loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
    });
];
复制代码

Happypack 配置项

  • id : String 类型,对于 happypack 来说唯一的 id 标识,用来关联 module.rules 中的 happypack/loader

  • loaders : Array 类型,设置各种 loader 配置,与 module.rulesloader 的配置用法一样

// 无配置时,可直接使用字符串形式
new HappyPack({
    id: 'babel',
    loaders: ['babel-loader?cacheDirectory']
})

// 有配置项时,可以使用对象形式
new HappyPack({
    id: 'babel',
    loaders: [
        {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }
    ]
})
复制代码
  • threads : Number 类型,指示对应 loader 编译源文件时同时使用的进程数,默认是 3

  • threadPool : HappyThreadPool 对象,代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多

// 创建一个 HappyThreadPool,作为所有 loader 共用的线程池
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

...
new HappyPack({
    id: 'babel',
    loaders: [
        {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }
    ],
    threadPool: happyThreadPool
})
复制代码
  • verbose : 是否允许 happypack 输出日志,默认是 true

  • verboseWhenProfiling : 是否允许 happypack 在运行 webpack --profile 时输出日志,默认是 false

  • debug : 是否允许 happypack 打印 log 分析信息,默认是 false

个人总结

个人的一点小总结,不足以作为参考依据

  • 在测试 Demo 或者小型项目中,使用 happypack 对项目构建速度的提升不明显,甚至会增加项目的构建速度

  • 在比较复杂的大中型项目中,使用 happypack 才能看到比较明显的构建速度提升

  • 因此,在使用 happypack 时请根据具体情况进行选择,如果反而延长了项目的构建速度,就没有必要使用 happypack


以上所述就是小编给大家介绍的《使用 happypack 提升 Webpack 项目构建速度》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Looking For a Challenge

Looking For a Challenge

the University of Warsaw / the University of Warsaw / 2012-11 / 0

LOOKING FOR PROGRAMMING CHALLENGES? Then this book is for you! Whether it's the feeling of great satisfaction from solving a complex problem set, or the frustration of being unable to solve a task,......一起来看看 《Looking For a Challenge》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试