如何使用Vite生成构建报告？Vue-CLI迁移后的同类命令疑问

Vite本身没有内置类似Vue-CLI的--report参数，但可以通过安装第三方Rollup插件实现完全相同的打包分析功能，具体步骤如下：

• 安装分析插件
  执行以下命令安装rollup-plugin-visualizer（Vite基于Rollup构建，因此兼容Rollup插件）：

  npm install rollup-plugin-visualizer --save-dev
  

• 修改Vite配置文件
  在项目根目录的vite.config.js或vite.config.ts中引入并配置插件：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { visualizer } from 'rollup-plugin-visualizer'
  
  export default defineConfig({
    plugins: [
      vue(),
      // 配置打包分析插件
      visualizer({
        open: true, // 构建完成后自动打开报告页面
        gzipSize: true, // 显示gzip压缩后的文件大小
        brotliSize: true, // 显示brotli压缩后的文件大小
        filename: 'dist/stats.html' // 报告文件的输出路径
      })
    ]
  })
  

• 执行打包命令
  直接运行常规的打包命令即可：

  npm run build
  

  构建完成后，浏览器会自动打开可视化报告页面，你可以直观看到各模块的大小占比、依赖关系、重复依赖等信息，效果和Vue-CLI的--report完全一致。

• 按需启用报告（可选）
  如果不想每次打包都生成报告，可以通过环境变量控制插件的启用：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { visualizer } from 'rollup-plugin-visualizer'
  
  export default defineConfig({
    plugins: [
      vue(),
      // 仅当ANALYZE环境变量为true时启用插件
      process.env.ANALYZE === 'true' && visualizer({ open: true })
    ].filter(Boolean) // 过滤掉null值，避免插件数组出现无效项
  })
  

  需要生成报告时，执行以下命令：

  ANALYZE=true npm run build
  

内容的提问来源于stack exchange，提问作者Little Monkey