From 97417736be86e7791f66e6d71eee7d0c380ba39f Mon Sep 17 00:00:00 2001 From: Rizumu Ayaka Date: Thu, 16 Oct 2025 02:39:12 +0800 Subject: [PATCH] chore: rollup-plugin-visualizer (#6072) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Using this tool, will generates dist/stats.html after build, we can see the parts that are excessively large when packaged. ```bash pnpm run build:analyze ``` CleanShot 2025-10-15 at 17 25 17@2x ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6072-chore-rollup-plugin-visualizer-28d6d73d36508184800cf7a67141b782) by [Unito](https://www.unito.io) --- package.json | 2 ++ pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++++++ pnpm-workspace.yaml | 1 + vite.config.mts | 18 +++++++++++++++++- 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0fca0e59e..9f1aeff9e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "build:desktop": "nx build @comfyorg/desktop-ui", "build-storybook": "storybook build", "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js", + "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build", "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build", "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts", "dev:desktop": "nx dev @comfyorg/desktop-ui", @@ -88,6 +89,7 @@ "nx": "catalog:", "postcss-html": "catalog:", "prettier": "catalog:", + "rollup-plugin-visualizer": "catalog:", "storybook": "catalog:", "stylelint": "catalog:", "tailwindcss": "catalog:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b362bc15..de05d7d7e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -201,6 +201,9 @@ catalogs: primevue: specifier: ^4.2.5 version: 4.2.5 + rollup-plugin-visualizer: + specifier: ^6.0.4 + version: 6.0.4 storybook: specifier: ^9.1.6 version: 9.1.6 @@ -591,6 +594,9 @@ importers: prettier: specifier: 'catalog:' version: 3.3.2 + rollup-plugin-visualizer: + specifier: 'catalog:' + version: 6.0.4(rollup@4.22.4) storybook: specifier: 'catalog:' version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)) @@ -6668,6 +6674,19 @@ packages: rfdc@1.4.1: resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==} + rollup-plugin-visualizer@6.0.4: + resolution: {integrity: sha512-q8Q7J/6YofkmaGW1sH/fPRAz37x/+pd7VBuaUU7lwvOS/YikuiiEU9jeb9PH8XHiq50XFrUsBbOxeAMYQ7KZkg==} + engines: {node: '>=18'} + hasBin: true + peerDependencies: + rolldown: 1.x || ^1.0.0-beta + rollup: 2.x || 3.x || 4.x + peerDependenciesMeta: + rolldown: + optional: true + rollup: + optional: true + rollup@4.22.4: resolution: {integrity: sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -6822,6 +6841,10 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + source-map@0.7.6: + resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==} + engines: {node: '>= 12'} + speakingurl@14.0.1: resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==} engines: {node: '>=0.10.0'} @@ -14733,6 +14756,15 @@ snapshots: rfdc@1.4.1: {} + rollup-plugin-visualizer@6.0.4(rollup@4.22.4): + dependencies: + open: 8.4.2 + picomatch: 4.0.3 + source-map: 0.7.6 + yargs: 17.7.2 + optionalDependencies: + rollup: 4.22.4 + rollup@4.22.4: dependencies: '@types/estree': 1.0.5 @@ -14924,6 +14956,8 @@ snapshots: source-map@0.6.1: {} + source-map@0.7.6: {} + speakingurl@14.0.1: {} sprintf-js@1.0.3: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index f3b1ce376..10eadc424 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -68,6 +68,7 @@ catalog: prettier: ^3.3.2 primeicons: ^7.0.0 primevue: ^4.2.5 + rollup-plugin-visualizer: ^6.0.4 storybook: ^9.1.6 stylelint: ^16.24.0 tailwindcss: ^4.1.12 diff --git a/vite.config.mts b/vite.config.mts index c68f386f1..ce22bf0a4 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -1,6 +1,7 @@ import tailwindcss from '@tailwindcss/vite' import vue from '@vitejs/plugin-vue' import dotenv from 'dotenv' +import { visualizer } from 'rollup-plugin-visualizer' import { FileSystemIconLoader } from 'unplugin-icons/loaders' import IconsResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' @@ -16,6 +17,7 @@ dotenv.config() const IS_DEV = process.env.NODE_ENV === 'development' const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true' +const ANALYZE_BUNDLE = process.env.ANALYZE_BUNDLE === 'true' // vite dev server will listen on all addresses, including LAN and public addresses const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true' const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true' @@ -163,7 +165,21 @@ export default defineConfig({ deep: true, extensions: ['vue'], directoryAsNamespace: true - }) + }), + + // Bundle analyzer - generates dist/stats.html after build + // Only enabled when ANALYZE_BUNDLE=true + ...(ANALYZE_BUNDLE + ? [ + visualizer({ + filename: 'dist/stats.html', + open: false, + gzipSize: true, + brotliSize: true, + template: 'treemap' // or 'sunburst', 'network' + }) + ] + : []) ], build: {