小编点评

**Webpack5性能优化指南** **优化前现状** * 项目基于 Vue3 + Webpack5技术栈，其中 webpack配置项由开发者自己维护。 * 项目体量大约5000个modules左右，每次本地构建build时耗时约150s左右。 **优化细节** * **环境分离：**优化基础配置文件、本地开发配置文件、生产环境配置文件，将环境配置分离到独立配置文件中。 * **热加载：**从 base移到 dev 配置中，生产环境中无需热更新 new webpack.HotModuleReplacementPlugin()。 * **devtool：**优化 dev 配置中 devdevtool 类型选择，使用 eval-cheap-module-source-map。 * **filename：**移除 hash，以启用热更新，本地开发环境启用热更新。 * **loader优化：**尽量减少 loader，例如使用 Asset modules替换 url-loader 等。 * **线程加载：**开启多线程处理 loader。 * **esbuild-loader替换 babel-loader：**使用 speed-measure-webpack-plugin 分析性能，并替换 babel-loader。 * **插件优化：**使用 speed-measure-webpack-plugin 分析插件和 loader编译时间，并尽量减少插件。 **优化结果** * 不启用缓存情况下耗时从 150s 减少到 60s 内线。 * 启用缓存情况下，二次构建减少到 10s 内线。 **结论** Webpack5 性能优化涉及多个方面，包括环境分离、热加载、devtool、loader优化、线程加载、esbuild-loader替换、插件优化以及缓存优化。这些优化措施显著提升了项目构建效率，使其从 150s 缩短到 60s，并启用缓存后进一步减少了构建时间。

正文

作者：京东科技 牛志伟

近期对Webpack5构建性能进行了优化，构建耗时从150s到60s再到10s，下面详细讲解下优化过程。

优化前现状

1.历史项目基于Vue3 + Webpack5技术栈，其中webpack配置项由开发者自己维护（没有使用@vue/cli-service），并且做了环境分离。

2.项目体量大约5000个modules左右，每次本地构建build时耗时约150s左右。

优化细节

环境分离

之前已经设计了环境分离，但是一些优化细节没有处理好：

•基础配置文件：webpack.base.js，主要配置了基础的loader和plugin等

•本地开发配置文件：webpack.dev.js，主要配置了devServer和样式、图片资源loader等，并merge基础配置

•生产环境配置文件：webpack.prod.js，主要配置了样式、图片资源loader以及资源压缩和样式抽离等，并merge基础配置

优化点：

•热加载相关配置，从base移到dev配置中，生产环境中不需要热更新

new webpack.HotModuleReplacementPlugin()

•dev配置中devtool类型选择，inline-source-map修改为eval-cheap-module-source-map，map文件使用内联方式构建速度更快。

devtool: 'eval-cheap-module-source-map'

•filename调整：js/[name].[fullhash].js去掉hash，本地开发环境启用热更新，不需要hash（生产环境需要hash刷新缓存）

output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
}

持久化缓存

base配置中开启持久化缓存（Webpack5新特性），首次构建耗时增加15%左右，但是二次构建耗时减少90%左右

cache: {
    type: 'filesystem'
}

Loader相关优化

•尽量减少loader，比如使用Asset modules（Webpack5新特性）替换url-loader、file-loader、raw-loader

// 字体和小于8kb的图片
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    type: 'asset',
    parser: {
        dataUrlCondition: {
            maxSize: 8 * 1024,
        },
    }
}
// 图片资源
{
    test: /\.(png|svg|jpg|gif|cur)$/,
    type: 'asset/resource',
    exclude: [path.resolve(__dirname, '../../../assets/svg')],
}

•thread-loader耗时任务开启多线程

{
    test: /\.vue$/,
    use: ['thread-loader', 'vue-loader'],
},
{
    test: /\.(t|j)s$/,
    exclude: /node_modules/,
    use: ['thread-loader', 'babel-loader'],
},
{
    test: /\.(sa|sc|c)ss$/,
    use: ['thread-loader', 'style-loader', 'css-loader', 'sass-loader'
},

•esbuild-loader替换babel-loader（由于改动较大，没有尝试）

Plugin相关优化

•使用speed-measure-webpack-plugin分析各个plugin、loader编译时间

•尽量减少plugin，比如HotModuleReplacementPlugin只在dev开启

•升级老旧plugin，比如terser-webpack-plugin版本从2升级到5，构建性能直接提升50%左右，具体原因有了解的同学可以打在评论区。

优化后效果

•不启用缓存情况下耗时从150s减少到60s以内

•优化后speed-measure-webpack-plugin编译速度分析

•启用持久化缓存情况下，二次构建减少到10s以内

Webpack5总结

以下是从基础、进阶、优化、插件使用以及打包原理几个方面做的Webpack5总结，有遗漏之处欢迎评论留言讨论