2024-07-18 淺嘗rollup-plugin-visualizer——檔案打包分析體積大小

叶乘风發表於2024-07-18
Plugin

前言：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，打包完會自動彈出分析網頁

相關文章