【转】vue3 打包时生成分析报告

一、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 查看打包报告