webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍

HappyPack

  • 由于运行在 Node.js 之上的 webpack 是单线程模型的,我们需要 webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力

HappyPack 插件就能实现多线程打包,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程,来提升打包速度!


  • 线程和进程都可用于实现并发,一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线。

安装

yarn add happypack --dev
or
npm install --save-dev happypack

vue.config.js 引入

const path = require('path')
const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池,拿到系统CPU的核数,happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
// 开启多线程构建插件(若项目为webpack5构建可以不启用此配置)
const happypack = new HappyPack({id: 'happybabel',loaders: ['babel-loader'],threadPool: happyThreadPool
})
module.exports =  {*********其他配置configureWebpack:config => {return {plugins: [happypack]};},********其他配置
}

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

Building for production...Happy[happybabel]: Version: 5.0.1. Threads: 8 (shared pool)
Building for production...Happy[happybabel]: All set; signaling webpack to proceed.

说明配置生效了。


不同webpack版本下使用建议

webpack4及以上已经融合了多线程机制,因此happypack的作用不是很明显。如果你使用的版本是<4,那么还是可以继续使用HappyPack。在webpack4中有个thread-loader搭配使用,配置起来更简单,两种方式都可以试一下看看那种方案对你来说最优。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4865.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux通过命令查看系统时间

Linux通过命令查看系统时间 查看Linux系统的时间查看Linux系统的时区 查看Linux系统的时间 查看时间和日期 date设置时间和日期 例1&#xff1a;将系统日期设定成2024年11月11日的命令 命令 &#xff1a; date -s 11/11/2024例2&#xff1a;将系统时间设定成下午2点12分12秒…

Spring Boot应用部署 - War包部署

WAR包部署 将Spring Boot应用部署为WAR包并部署到外部Tomcat服务器上&#xff0c;需要进行一些特定的配置和步骤。以下是详细说明&#xff1a; 1. 修改打包方式 在项目的构建工具配置文件中&#xff08;通常是pom.xml for Maven&#xff09;&#xff0c;将打包方式改为war。…

Linux Kernel入门到精通系列讲解(QEMU-虚拟化篇) 2.3 创建OpenSBI虚拟化环境

1.概述 上一章节我们已经添加了几个外设,这一章节我们打算为移植OpenSBI做环境准备,顺便修复一些BUG。什么是OpenSBI呢?OpenSBI 是RISC-V的一段BL2程序,他负责加载跳转BL3(U-boot)程序,它提供了许多开源的IP driver,方便用户快速移植,同时也提供了三种模式,具体我会…

【ARM Cache 系列文章 11.2 -- ARM Cache 组相联映射】

请阅读【ARM Cache 系列文章专栏导读】 文章目录 Cache 组相联映射组相联映射原理多路组相连缓存的优势多路组相连缓存的代价关联度(Associativity)上篇文章:【ARM Cache 系列文章 11.1 – ARM Cache 全相连 详细介绍】 Cache 组相联映射 ARM核心的主要缓存总是使用一组多路…

java开发常用工具类(持续更新...)

文章目录 一、apache.commons.lang31、StringUtils字符串工具类1.1、判断字符串是否为空1.2、截取字符串1.3、判断字符串内容类型 2、ObjectUtils工具类2.1、判断对象是否为空2.2、对象为null返回默认值 3、DateUtils日期工具类3.1、日期加减法 二、google.guava1、普通集合2、…

Python 全栈体系【四阶】(三十七)

第五章 深度学习 八、目标检测 3. 目标检测模型 3.1 R-CNN 系列 3.1.1 R-CNN 3.1.1.1 定义 R-CNN(全称 Regions with CNN features) &#xff0c;是 R-CNN 系列的第一代算法&#xff0c;其实没有过多的使用“深度学习”思想&#xff0c;而是将“深度学习”和传统的“计算…

Mac NTFS磁盘读写工具选择:Tuxera还是Paragon?

在Mac上使用NTFS磁盘时&#xff0c;选择一款合适的读写工具至关重要。Tuxera和Paragon作为两款备受推崇的Mac NTFS磁盘读写工具&#xff0c;都能够帮助用户轻松地实现NTFS格式的读写。那么&#xff0c;面对这两款功能强大的工具&#xff0c;我们应该如何选择呢&#xff1f;本文…

CACTER AI实验室:AI大模型在邮件安全领域的应用

随着人工智能技术的飞速发展&#xff0c;AI已经深入到生活的各个领域。AI大模型在邮件安全领域展现出巨大潜力&#xff0c;尤其是反钓鱼检测上的应用&#xff0c;正逐渐展现出其独特的价值。 4月24日&#xff0c;CACTER AI实验室高级产品经理刘佳雄在直播交流会上分享了CACTER …

c语言——二叉树

目录 目录 二叉树关键概念理解 一颗拥有1000个结点的树度为4&#xff0c;则它的最小深度是&#xff1f; 那么对于二叉树&#xff0c;只掌握这些是远远不够的&#xff0c;我们还需要掌握几个最基本的经典问题&#xff0c; 求二叉树大小 求叶子结点个数 求深度 求第k层的…

Window11安装vim编辑器

我们在做git操作的时候&#xff0c;很多文字编辑工作会默认打开 Vim 编辑器来进行操作。 Vim 是一个高度可配置的文本编辑器&#xff0c;旨在让创建和更改任何类型的文本变得非常高效。大多数 UNIX 系统和 Apple OS X 都将它作为vi包含在内&#xff0c;用惯了Linux中的Vim编辑器…

长江证券:地产需求,去哪儿呢?

核心观点&#xff1a; 1.来有影&#xff0c;去无踪。无论是价格还是销量&#xff0c;年初以来房地产市场进一步深度调整。现实的直观感受是&#xff0c;住房需求锐减以及二手房供给骤增。如此短期变化&#xff0c;能否用人口、城镇化等长期因素来解释&#xff1f;是否能通过不…

rknn 麒麟系统调试环境搭建

目录 设置ip 设置静态ip adb usb调试驱动下载 可以用ssh进行远程链接 设置ip 一&#xff0e;解决方法 设置自动获取IP 第一步&#xff1a;编辑文件 sudo vim /etc/network/interfaces 第二步&#xff1a;重启network sudo /etc/init.d/networking restart 设置静态ip au…

“地表最强”文生视频模型?Sora 背后有何秘密?

自 2022 年底 ChatGPT 的横空出世&#xff0c;人工智能再度成为全世界的焦点&#xff0c;基于大语言模型&#xff08;LLM&#xff09;的 AI 更是人工智能领域的“当红炸子鸡”。此后的一年&#xff0c;我们见证了 AI 在文生文、文生图领域的飞速进展&#xff0c;但在文生视频领…

【C++】学习笔记——内存管理

文章目录 二、类和对象20. 友元1. 友元函数2.友元类 21. 内部类22. 匿名对象23. 拷贝对象时的一些编译器优化 三、内存管理1. C/C内存分布2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3. C内存管理方式 未完待续 二、类和对象 20. 友元 1. 友元函数 我…

溪谷软件:游戏联运有多简单?

游戏联运&#xff0c;即游戏联合运营&#xff0c;是一种游戏运营模式&#xff0c;涉及到多个平台或公司共同推广和运营同一款游戏。对于开发者而言&#xff0c;游戏联运的简化程度可能因具体情况而异&#xff0c;但以下是一些因素&#xff0c;使得游戏联运在某种程度上变得更加…

认识Linux及一些基本

目录 linux简介&#xff1a; 1. 发展史 UNIX发展的历史 Linux发展历史 2. 开源 3. 企业应用现状 Linux在服务器领域的发展 Linux在桌面领域的发展 Linux在移动嵌入式领域的发展 Linux在云计算/大数据领域的发展 4. 发行版本 Debian Ubuntu 红帽企业级Linux Cent…

Java 设计模式(行为型)

文章目录 策略模式迭代器模式访问者模式观察者模式命令模式模板方法模式事件驱动模式责任链模式中介者模式状态模式 策略模式 策略模式是一种行为设计模式&#xff0c;它定义了一系列算法&#xff0c;将每个算法封装在独立的策略类中&#xff0c;并使它们可以互相替换。策略模…

Android 在AMS中拦截某个指定Activity的启动

文章目录 Android在AMS中拦截某个具体Activity的启动方案一&#xff08;推荐&#xff09;&#xff1a;在ActivityTaskManagerService.startActivityAsUser方法中去作拦截方案二&#xff1a;在Dialog.show()方法中直接对这个包名所创建的Dialog做限制 Android在AMS中拦截某个具体…

金荣中国模拟账户有什么用?实战演练,助力投资者稳健起步

在投资市场中&#xff0c;新手投资者往往面临着缺乏经验、不熟悉市场规则等问题&#xff0c;这些都可能导致投资者在真实交易中遭受损失。为了解决这个问题&#xff0c;金荣中国为投资者提供了一个模拟账户&#xff0c;那么金荣中国模拟账户有什么用&#xff1f;功能旨在通过实…

【经典面试题】Vue3和Vue2有什么区别?

在这篇博客中&#xff0c;我们将深入探讨 Vue 2 和 Vue 3 之间的主要差异&#xff0c;并通过示例代码来展示这些差异。 1. 架构变化 Vue 3 引入了一种新的内部架构&#xff0c;使用 Proxy 替代了 Vue 2 中的 Object.defineProperty。这个变化带来了性能的提升和更好的内存管理…