优化逻辑
任何优化需求，都有一个前提，即可衡量。
那 Vue 加载速度的优化需求，本质上是要降低加载静态资源的大小。
所以，优化前，需要有一个了解项目现状的资源加载大小情况。
主要分 3 步走：
-
找到方法测量打包文件大小的方式。
-
完成打包文件大小的测量。
-
根据测量结果，对大文件进行针对性地优化处理。
思路捋顺后，核心就是要找到一个可测量的工具。
而要测量项目运行包的各个文件大小，关键在于要测量项目打包构建后的各个文件大小。
所以测量工具插件，和打包环境密切相关。
不同的环境下，有不同的测量工具。
以下罗列了当前 Vue3 项目下常用的打包环境及包大小测量和分析插件。
Vue3 + Vite 环境
安装插件
npm install vite-plugin-compression --save-dev配置插件
在 vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer' // 引入 visualizer 插件
export default defineConfig({
plugins: [
vue(),
visualizer({
open: true, // 构建完成后会自动打开浏览器，显示可视化报告。如果您不想自动打开，可以设置为 false。
filename: 'stats.html', // 生成的报告文件名称，默认保存为项目根目录下的 stats.html 文件，您可以修改路径和文件名。
gzipSize: true, // 显示各文件在经过 gzip 压缩后的大小
brotliSize: true // 显示各文件在经过 brotli 压缩后的大小
})
],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
});构建项目生成报告
npm run build构建完成后，按照配置会自动生成报告 stats.html 文件。
如果配置为 open:true，则会在构建完成后自动打开报告页面。
报告示例
如上图，打包文件占比较大的主要是以下 3 个包/文件：
-
element-plus：
-
lodash.js
-
ort.min.js
所以，根据占比较大的文件去做针对性的优化即可。
Vue3 + Vue Cli 环境（Webpack打包）
安装插件
npm install --save-dev webpack-bundle-analyzer配置插件
在 vue.config.js 中引入并配置 webpack-bundle-analyzer 插件。
const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static', // 生成静态 HTML 文件
openAnalyzer: true, // 构建完成后自动打开浏览器展示报告
reportFilename: 'bundle-report.html', // 报告文件名，可以自定义路径和名称
}),
],
},
});构建项目生成报告
在配置完成后，您可以运行以下命令构建项目，并生成报告：
npm run build构建完成后，webpack-bundle-analyzer 会生成一个静态的 HTML 文件（默认在 dist/ 目录下，或根据 reportFilename 的配置），并自动在浏览器中打开。可以在报告中查看每个模块的体积以及其依赖关系。
报告示例
Vue3 + Rollup 环境
安装插件
npm install --save-dev rollup-plugin-visualizer配置插件
在 rollup.config.js 文件中添加该插件：
import { visualizer } from 'rollup-plugin-visualizer';
export default {
input: 'src/main.js', // 项目的入口文件
output: {
file: 'dist/bundle.js', // 输出文件
format: 'es',
},
plugins: [
// 其他插件
visualizer({
open: true, // 构建完成后自动打开浏览器展示报告
filename: 'stats.html', // 生成的报告文件名
gzipSize: true, // 显示 gzip 压缩后的大小
brotliSize: true // 显示 brotli 压缩后的大小
})
],
};构建项目生成报告
npx rollup -c构建完成后，按照配置会自动生成报告 stats.html 文件。
如果配置为 open:true，则会在构建完成后自动打开报告页面。
