Vue CLI Webpack 配置优化指南
本文将深入探讨如何在 Vue CLI 3.x 项目中优化 Webpack 配置，重点关注性能提升和构建分析。Vue CLI 3.x 对 Webpack 进行了深度封装，许多配置已默认优化。我们将介绍如何利用特定插件来量化构建时间和分析打包产物，并讲解如何引入缓存机制来加速构建过程。
构建性能分析
1. 测量 Loader 和 Plugin 执行时间：speed-measure-webpack-plugin
speed-measure-webpack-plugin 能够精确测量项目中各个 Loader 和 Plugin 的执行耗时。构建完成后，它会提供一个详细的时间报告，帮助开发者定位性能瓶颈。
安装：
npm install speed-measure-webpack-plugin --save-dev
集成到 Vue CLI 3.x：
在 vue.config.js 文件中，使用 smp.wrap() 方法包裹 configureWebpack 对象。
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin({
outputFormat: 'human' // 可选，用于指定输出格式
});
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// ... 其他插件
]
})
};
集成后，每次构建项目时，命令行都会输出详细的性能分析数据。
2. 分析打包产物大小：webpack-bundle-analyzer
webpack-bundle-analyzer 用于可视化分析最终打包出的 JavaScript 模块大小，帮助识别哪些库或模块占用了过多的空间，从而进行针对性优化。
安装：
npm install webpack-bundle-analyzer --save-dev
注意： 在 Vue CLI 3.x 项目中，直接安装可能会因依赖冲突而报错。通常需要先从 node_modules 中手动删除该包，然后再重新安装。
集成到 Vue CLI 3.x：
将 BundleAnalyzerPlugin 添加到 configureWebpack 的 plugins 数组中。建议将其放在插件列表的末尾，以确保能分析所有已处理的模块。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
// ... 其他插件
new BundleAnalyzerPlugin()
]
}
};
配置完成后，构建过程结束后会自动启动一个 Web 服务器，展示一个交互式的 Bundle 分析图表。
构建缓存优化
1. Loader 结果缓存：cache-loader
cache-loader 可以在性能开销较大的 Loader（如 babel-loader）之前添加，将 Loader 的编译结果缓存到磁盘，避免重复计算，显著提升后续构建速度。
安装：
npm install cache-loader --save-dev
集成到 Vue CLI 3.x：
Vue CLI 3.x 默认已为 vue-loader 和 babel-loader 启用了缓存。如果需要为其他 Loader 添加缓存，可以手动配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('js')
.test(/\.js$/)
.use('cache-loader')
.loader('cache-loader')
.before('babel-loader'); // 放在 babel-loader 之前
}
};
2. 模块中间缓存：hard-source-webpack-plugin
hard-source-webpack-plugin 为 Webpack 的构建过程提供了一个更底层的缓存层，缓存模块的编译结果，能带来显著的性能提升，尤其是在多仓库或大型项目中。
安装：
npm install hard-source-webpack-plugin --save-dev
集成到 Vue CLI 3.x：
将 HardSourceWebpackPlugin 实例添加到 configureWebpack 的 plugins 数组中。
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
// 假设 smp 和 BundleAnalyzerPlugin 已经引入
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
new HardSourceWebpackPlugin(), // 添加 HardSourceWebpackPlugin
new BundleAnalyzerPlugin()
// ... 其他插件
]
})
};
首次构建后，node_modules/.cache/hard-source 目录下会生成缓存文件。后续构建会利用这些缓存，可以观察到构建时间的显著缩短，特别是对于非首次构建。
例如，多次构建后，第三次构建的性能提升可能达到 80%。
