【webpack5修行之道】第15篇：性能优化-多进程打包

最新推荐文章于 2025-03-27 17:46:29 发布

jay_mw

最新推荐文章于 2025-03-27 17:46:29 发布

阅读量2.4k

点赞数 1

分类专栏： webpack 文章标签： node.js webpack 前端

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117306064

版权

本文探讨了webpack5中的多进程打包优化，解释了如何通过thread-loader实现多线程编译以提高速度。然而，配置不当可能导致编译时间增加。在js量较大，babel-loader编译慢时，多线程打包能显著提升效率，但针对小型项目，则需谨慎使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第14篇：性能优化-PWA

多进程打包是一把双刃剑，如果使用得当，他会大大提高编译速度，如果使用不当，那么编译速度反而会增加

因为thread-loader多线程开启过程需要耗费时间大概为600ms，多线程之间的通信也会消耗时间

一般我们项目中是js编译的时候比较慢，所以多进程打包一般也是和babel-loader一起配置

首先安装包: npm install -D thread-loader

我们先不配置多线程打包，进行编译： npm run build

得到的时间大概为: 4.29秒

然后我们开启多线程打包，修改webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const { resolv