【转】vue3 打包时生成分析报告_vite build report-CSDN博客

博客介绍了两种方式为Vue3项目生成打包报告。一是vite构建的项目，需下载visualizer插件，在配置文件中配置插件，在package.json添加内容并运行命令；二是用vue脚手架@vue/cli构建的项目，在package.json添加内容、运行命令，最后用浏览器打开报告文件查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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