webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

最新推荐文章于 2025-06-29 09:24:41 发布

原创

最新推荐文章于 2025-06-29 09:24:41 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #打包优化 #vue #js

本文详细介绍了如何优化webpack打包速度，包括使用speed-measure-plugin分析速度，analyse-tools分析体积，通过thread-loader实现多进程构建，利用externals提取公共资源至CDN，采用terser-webpack-plugin并行压缩，以及运用Polyfill Service动态加载polyfill。

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

如今，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。

这篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本为例。

一、打包分析

1.1、速度分析

我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下：

分析整个打包总耗时
每个 plugin 和 loader 的耗时情况

首先，安装插件

npm i -D speed-measure-webpack-plugin

然后修改 vue.config.js 配置文件（vuecli3+ 版本的配置文件统一在这个文件里修改，如果没有该文件，在根目录新建一个）

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 实例化插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 这里是自己项目里需要使用到的其他插件
            new yourOtherPlugin()
        ]
    })
}

运行打包命令之后，可以看到，打包总耗时为 2min,51.99s

1.2、体积分析

分析完打包速度之后，接着我们来分析打包之后每个文件以及每个模块对应的体积大小。使用到的插件为 webpack-bundle-analyzer，构建完成后会在 8888 端口展示大小。

首先，安装插件

npm i -D webpack-bundle-analyzer

修改 vue.config.js 配置文件

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 实例化速度分析插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 实例化体积分析插件
            new BundleAnalyzerPlugin()
        ]