一、vite 构建的 vue3 项目生成打包报告
1、下载 visualizer 插件
npm install rollup-plugin-visualize -D
2、在 vite.config.js 配置 rollup-plugin-visualizer 插件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
const buildReportplugin =
process.env.npm_lifecycle_event === 'build:report'
? visualizer({ open: true, brotliSize: true, gzipSize: true, filename: 'dist/report.html' })
: null
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),buildReportplugin],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
3、在 package.json 文件的 scripts 属性下添加
"build:report": "vite build",
4、运行命令生成打包报告
打包文件位置:dist/report.html
npm run build:report
二、vue脚手架 @vue/cli 构建的 vue3 项目生成打包报告
1、在 package.json 文件的 scripts 属性下添加
"build:report": "vue-cli-service build --report",
2、运行命令生成打包报告
打包文件位置:dist/report.html
npm run build:report
3、用浏览器打开 dist/report.html 查看打包报告