2024-07-18 浅尝rollup-plugin-visualizer——文件打包分析体积大小

前言：vite+vue项目

rollup-plugin-visualizer：一个用于 Rollup 构建系统的插件，它能够生成可视化的报告，展示你的项目构建后的模块依赖关系和文件大小。

仓库：https://github.com/btd/rollup-plugin-visualizer

安装：

yarn add rollup-plugin-visualizer

配置（vite.config.ts）：

import { defineConfig } from 'vite';
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
    plugins: [
        // ...    
        visualizer({
            open: true,  // true 打包完自动打开分析页面，false 不会自动弹出
            filename: "stats.html", // 分析图生成的文件名
            gzipSize: true, // 是否统计并显示gzip
            brotliSize: true, // 是否统计并显示brotli
        })
    ],

使用：执行yarn build，打包完会自动弹出分析网页