webpack优化系列(9)-多进程打包

最新推荐文章于 2024-06-27 10:11:01 发布
最新推荐文章于 2024-06-27 10:11:01 发布
阅读量432 收藏
点赞数
分类专栏： webpack配置以及优化 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysj1218/article/details/114264264
版权

 场景

js是单线程，同一时间只能干一件事情，如果事情很多，那么就会排队等很久，时间慢。如果同一时间两个/三个进程干这件事情，那么速度就会快很多。 

thread-loader

开启多进程打包，一般用在babel-loader后面。

webpack配置如下：

module: {
    rules: [
        {
            test: /\.js$/,
            use: [{
                loader: 'thread-loader',
                options: {
                    workers: 2
                }
            },
            'babel-loader']
        }
    ]
}

但是使用多进程打包使用也有利有弊：

进程启动大概600ms，进程通信(告诉你某件事情我干好了)也有时间开销。

假设我们花100ms完成的事情，开启多进程打包，那么就会得不偿失。所以多进程打包用在：工 作消耗时间比较长，用直白的话说就是js代码多。

多进程打包一般用在js文件上面，那么有两个loader对js文件进行处理：

  • eslint-loader：只是对代码进行语法检查，消耗时间可能不是很长
  • babel-loader：要进行编译，转换，所以时间比较长，所以用在babel-loader里面

系列相关

Sunsine_C
关注
专栏目录
（14）webpack (多进程打包) thread-loader
秋来九月八
11-02 7091
多进程打包：某个任务消耗时间较长会卡顿，多进程可以同一时间干多件事，效率更高。 优点是提升打包速度，缺点是每个进程的开启和交流都会有开销（babel-loader消耗时间最久，所以使用thread-loader针对其进行优化） 下载 npm i thread-loader -D 使用 { test: /\.js$/, exclude: /node_modules/, use: [ /* thread-loader会对其后面的loader（这里是babel-loader）
webpack性能优化
doomliu的博客
05-16 901
性能分析 1. 统计基本信息 使用webpack内置的stats 可以统计出构建时间、构建资源清单及资源大小等信息 使用方法： 1. cli webpack --env production --json > stats.json 2. node API webpack(config, (err, stats) => { console.log(stats); }); 2. 速度分析 使用speek-measure-webpack-plugin 插件功能 分析出整个构建时间和每个loa
webpack提高构建速度之打包开启多进程（thead）
jieyucx的博客
06-17 2266
Webpack的多进程打包是通过利用多个子进程同时处理不同的模块来加速打包过程的技术。这种技术可以提高打包效率，减少等待时间，使得项目构建更快。使用多进程打包的好处在于，它可以将一些比较耗时的操作分配到不同的进程中进行并行处理，从而提高打包效率。这使得打包过程更加高效，节省了时间和资源。另外，和单进程打包相比，多进程打包也有助于避免进程卡死或异常终止的问题。对于大型项目或需要进行复杂操作的项目，采用多进程打包可以更快地完成项目构建，提高效率，减少等待时间，使开发人员可以更快地检验代码。
webpack多进程打包
小菜鸟的博客
02-05 1054
webpack打包
webpack 打包全流程
harvestUachieve的博客
08-20 4371
只有在脚本使用时才会调用。ES6渐渐取代CommonJs。
三、webpack4.0优化
qq_25354709的专栏
02-20 606
一、noParse 新建一个 WEBPACK-OPTIMIZE 项目。 主要来讲一下webpack的优化。 初始化package.json。 npm init -y 安装： npm install webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/pre...
Webpack5 多线程Threads
有趣的小良的博客
07-31 1323
传统的单线程构建方式已经无法满足需求，因此Webpack5引入了多线程 Threads 技术，以并行处理构建任务，从而显著提高构建速度。Webpack5 多线程 Threads 技术是提升构建性能的重要利器，通过并行处理任务，能够显著缩短构建时间，提高开发效率。使用 Threads 的步骤相对简单，只需安装。在Webpack5中，Threads 指的是并行处理构建任务的线程，通过充分利用多核CPU的能力来提高构建速度。随着前端项目的不断演进，我们应积极探索并采用更多优化手段，以追求更高的性能和开发体验。
【webpack5修行之道】第15篇：性能优化-多进程打包
j178202798的博客
06-18 2338
上一篇：【webpack5修行之道】第篇：性能优化-多进程打包 多进程打包是一把双刃剑，如果使用得当，他会大大提高编译速度，如果使用不当，那么编译速度反而会增加 因为thread-loader多线程开启过程需要耗费时间大概为600ms，多线程之间的通信也会消耗时间 一般我们项目中是js编译的时候比较慢，所以多进程打包一般也是和babel-loader一起配置 首先安装包: npm install -D thread-loader 我们先不配置多线程打包，进行编译： npm run buil..
前端开源库-webpack-parallel-uglify-plugin
08-29
Webpack是前端开发中广泛使用的模块打包工具，它能够将JavaScript、CSS、图片等各种资源进行有效管理和打包，使得项目构建过程更为高效。在大型项目中，为了提升构建速度，开发者经常需要利用各种优化策略，其中并行...
webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）
HashTang的博客
11-16 2212
如今，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。 这篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本为例。 一、打包分析 1.1、速度分析 我们的目的是优化打包速度，那肯定需要一个速度分...
webpack5 使用Thead多进程打包提升打包构建速度
周家大小姐
11-17 878
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。多进程打包：开启电脑的多个进程同时干一件事，速度更快。
webpack开启cpu多线程提升打包效率，大型项目适用
李知恩李知金
04-18 1303
import Os from "os"; export default { module: { rules: [ { test: /.js$/, use: [ { loader: "thread-loader", options: { workers: Os.cpus().le.
webpack 打包配置
最新发布
这个人很懒~
06-27 972
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
Webpack——多进程打包
weixin_42789698的博客
05-26 41
多进程打包 webpack.config.js /** * 多进程打包 * 1.下载thread-loader——》cnpm i thread-loader -D * 2.哪个loader需要多进程打包就使用该loader，一般给babel-loader使用，使用如下: * // 对js进行兼容性处理 { test: /\.js$/, exclude: /node_modules/, use: [
webpack多进程打包方案
lamianT的博客
03-17 1536
webpack多进程打包方案
前端webpack5+打包工具基础入门css压缩babel配置ES6代码转ES5搭建简单的线上环境完整流程（一）
laimaodashuaige的博客
05-27 898
所需软件： vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器） node.js，官网链接下载：http://nodejs.cn/； 使用chrome浏览器时遇到英文网站可以点击右键翻译 安装自己电脑的合适版本即可。 安装这些一般直接点击下一步即可，对于一些国外的软件注意安装目录中最好不要有中文路径，以免出现问题。 1.创建一个webpackdome文件夹 首先我们创建一个webpackdome文件夹，然后把该文件夹拖入之我们的编辑器（vsc
webpack4.0让编译速度飙升
weixin_34162695的博客
06-12 1264
前端开发一个crm项目的时候，因为项目内容比较庞大，导致webpack编译和打包都巨慢，实在是影响开发效率，所以着手升级webpack。 webpack4-es6-react webpack4-es6-react是一个全新的基于webpack4、react16、es6、antd-mobile的前端架构实现方案，默认是antd-mobile...
webpack的优化配置（一）
陈开心的博客
03-11 366
webpack通过配置loader和plugin可以帮我们做很多不同的工作，但是比较头疼的是，记住很多的loader和plugin并不方便，所以webpack4之后就引入了新的概念，就是mode模式，通过配置官网约定的两个模式：开发模式和生产模式，这两个模式分别有默认配置好的插件供我们使用，我们不需要再为配置而发愁（convention over configuration也就是约定大于配置），如果模式中有些细微的东西在项目中不太合适，也可以overwrite重写里面的配置，但我们不需要大规模的从头到尾自己
webpack多进程打包技术
mhbsoft的博客
07-06 2248
thread-loader’ 可以给多个loader 加多线程打包 多线程打包 loader { test: /\.js$/, exclude: /node_modules/, use: [ // 开启多进程打包 // 进程启动大概 600ms， 进程通信 也要花时间。 // 只有工作消耗时间比较长，才需要多进程打包。 // 'thread-loader', // 进程默认 cpu核数-1 { loader: 'thread-loa
webpack打包优化
05-17
Webpack 打包优化是提高应用性能和优化用户体验的重要手段之一。以下是一些常见的优化技巧： 1. 使用 Tree Shaking：Tree Shaking 是 Webpack 的一个特性，它可以删除没有使用的模块，从而减少打包体积。 2. 使用 Code Splitting：Code Splitting 是将应用程序拆分成更小的代码块，这些代码块可以按需加载，从而减少首次加载时间。 3. 压缩代码：压缩代码可以减少代码大小，从而加快加载速度。可以使用 Webpack 的 UglifyJS 插件来压缩代码。 4. 使用缓存：使用缓存可以减少请求次数，从而加快加载速度。可以使用 Webpack 的 cache-loader 插件来缓存模块。 5. 使用 DLLPlugin：DLLPlugin 是一个 Webpack 插件，它可以将常用的代码库打包成一个独立的文件，从而减少打包时间。 6. 使用 HappyPack：HappyPack 是一个 Webpack 插件，它可以将任务分解为多个子进程，从而加快打包速度。 7. 使用 ParallelUglifyPlugin：ParallelUglifyPlugin 是一个 Webpack 插件，它可以使用多个子进程并行压缩代码，从而加快打包速度。 8. 配置 babel-loader：babel-loader 是 Webpack 的一个 loader，可以将 ES6+ 代码转换为 ES5 代码，从而兼容更多的浏览器。 9. 配置 resolve：resolve 可以配置 Webpack 如何解析模块路径，从而减少搜索时间。 10. 使用 Webpack-bundle-analyzer：Webpack-bundle-analyzer 可以分析打包后的文件，从而找出哪些模块占用了过多的空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值