打包分析插件

介绍

Rollup Plugin Visualizer,这是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),你可以选择任意一种你喜欢的观察模式，这里我们就以默认的为例。

文档地址

安装

pnpm install rollup-plugin-visualizer

配置

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer'
const lifecycle = process.env.npm_lifecycle_event

export default defineConfig({
  plugins: [
    vue(),
    // 只有在build:report命令下才配置打包分析插件
    lifecycle === 'build:report' ? visualizer({
        open: true,  //注意这里要设置为true，否则无效
        gzipSize: true,
        brotliSize: true
    }) : null
  ],
})

// package.json
{
    "scripts" : {
        "build:report": "vite build"
    }
}

命令

npm run build:report

效果

图片