vue项目中使用 webpack优化之HappyPack 实战

vue项目中使用 webpack优化之HappyPack 实战由于运行在 Node js 之上的 Webpack 是单线程模型的 所以 Webpack 需要处理的事情需要一件一件的做 不能多件事一起做 我们需要 Webpack 能同一时间处理多个任务 发挥多核 CPU 电脑的威力 HappyPack 就能让 Webpack 做到这点 它把任务分解给多个子进程去并发的执行 子进程处理完后再把结果发送给主进程 由于 JavaScript 是单线程模型 要想发

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

提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。

安装 HappyPack

npm i -D happypack

运行机制

vue项目中使用 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, }) ] } 
  • 在 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://javaforall.net/176544.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午9:40
下一篇 2026年3月26日 下午9:40


相关推荐

  • matlab设计模拟带通滤波器

    matlab设计模拟带通滤波器简单记录下在matlab上如何设计出模拟的带通滤波器,包括:巴特沃斯滤波器、切比雪夫I型滤波器、切比雪夫II型滤波器、椭圆型滤波器。代码如下:%设计带通滤波器%巴特沃斯、切比雪夫I型、切比雪夫II型

    2022年7月2日
    24
  • awr报告 解读_十步解析awr报告

    awr报告 解读_十步解析awr报告十步解析 awr 报告从这期开始讲解 awr 报告的部分 首先讲解 awr 整体的部分后续会针对不同的点进行讲解 1 数据库细节这部分可以看到数据库的版本数据库 DBID 数据库实例名称及实例号数据库最近一次启动时间数据库版本数据库是否为 rac2 主机配置信息这部分可以看到数据库主机名数据库主机平台服务器 CPU 及核数服务器 CPU 个数服务器内存大小 3 SnapShot 信息这部分可以看到 awr 报告的起止时间以及

    2026年3月19日
    2
  • 组态王设备驱动程序开发

    组态王设备驱动程序开发诚接组态王硬件设备驱动程序开发项目 有需要的可私信

    2026年3月26日
    1
  • Linux安装rinetd

    为什么80%的码农都做不了架构师?>>>…

    2022年4月7日
    125
  • G6流程图绘制

    G6流程图绘制为了能在线编辑流程 支持流程节点编辑等功能 支持人员等选择功能 支持流程图数据保存 利用阿里 G6 进行设计开发 整体效果图如下 支持放大缩小 节点移动 添加节点及边等 同时支持节点及边删除操作 流程图数据保存等工作 支持节点编辑 包括人员选择 图形选择 宽高编辑 背景色 边框色等信息编辑 支持边的编辑 边描述等 各种交互功能就不赘述了 页面代码如下 DOCTYPE YPE html head head html

    2025年7月25日
    2
  • 记一次使用策略模式优化代码的经历[通俗易懂]

    记一次使用策略模式优化代码的经历[通俗易懂]一、背景之前接手了一个springboot项目。在我负责的模块中,有一块用户注册的功能,但是比较特别的是这个注册并不是重新注册,而是从以前的旧系统的数据库中同步旧数据到新系统的数据库中。由于这些

    2022年8月16日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号