feat(bundler-vite): better analyze config (umijs#10236)

* feat(bundler-vite): better analyze config

* fix(bundler-vite): ignore type error

* feat(bundler-vite): improve type

* feat(bundler-vite): improve type

* feat(bundler-webpack): type for webpack-bundle analyzer

* feat(bundler-webpack): better type

* feat(bundler-vite): better type

* docs: analyze config in vite mode

* feat(bundler-vite): better type

* Update docs/docs/api/config.md

Co-authored-by: 咲奈Sakina <[email protected]>

docs/docs/api/config.md

@@ -73,6 +73,8 @@
 
 通过指定 [`ANALYZE`](../guides/env-variables#analyze) 环境变量分析产物构成时，analyzer 插件的具体配置项，见 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin)
 
+使用 Vite 模式时，除了可以自定义 [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) 的配置， `excludeAssets`、`generateStatsFile`、`openAnalyzer`、`reportFilename`、`reportTitle` 这些选项会自动转换适配。
+
 ## base
 
 - 类型：`string`

packages/bundler-vite/package.json

@@ -31,12 +31,11 @@
     "@vitejs/plugin-react": "2.2.0",
     "less": "4.1.2",
     "postcss-preset-env": "7.5.0",
-    "rollup-plugin-visualizer": "5.6.0",
+    "rollup-plugin-visualizer": "5.9.0",
     "vite": "3.2.5"
   },
   "devDependencies": {
     "@types/caniuse-lite": "1.0.1",
-    "@types/rollup-plugin-visualizer": "4.2.1",
     "@types/svgo": "2.6.3",
     "@vitejs/plugin-legacy": "2.3.1",
     "caniuse-lite": "1.0.30001441",

packages/bundler-vite/src/config/transformer/rollup.ts

@@ -1,7 +1,11 @@
 import path from 'path';
-import visualizer from 'rollup-plugin-visualizer';
+import {
+  visualizer,
+  type PluginVisualizerOptions,
+} from 'rollup-plugin-visualizer';
 import type { IConfigProcessor } from '.';
 import copy from '../../../compiled/rollup-plugin-copy';
+import type { IConfig } from '@umijs/bundler-webpack/dist/types';
 
 /**
  * transform umi configs to vite rollup options
@@ -18,11 +22,45 @@ export default (function rollup(userConfig) {
 
   // handle analyze
   if (typeof userConfig.analyze === 'object' || process.env.ANALYZE) {
+    const {
+      generateStatsFile,
+      openAnalyzer,
+      reportFilename,
+      reportTitle,
+      excludeAssets,
+      ...analyzeOverrides
+    } = (userConfig.analyze || {}) as PluginVisualizerOptions &
+      IConfig['analyze'];
+
+    function getExclude(): PluginVisualizerOptions['exclude'] {
+      if (!excludeAssets) return [];
+      const excludes = Array.isArray(excludeAssets)
+        ? excludeAssets
+        : [excludeAssets];
+      return (
+        excludes
+          .filter((exclude) => {
+            return typeof exclude === 'string';
+          })
+          // @ts-ignore
+          .map((exclude: string) => {
+            return {
+              bundle: exclude,
+              file: exclude,
+            };
+          })
+      );
+    }
     config.build!.rollupOptions!.plugins!.push(
       visualizer({
-        open: true,
-        json: userConfig.analyze?.generateStatsFile,
-        // TODO: other options transform, refer: https://umijs.org/config#analyze
+        template: generateStatsFile ? 'raw-data' : 'treemap',
+        open: openAnalyzer,
+        exclude: getExclude(),
+        gzipSize: true,
+        brotliSize: true,
+        filename: reportFilename,
+        title: reportTitle as string | undefined,
+        ...analyzeOverrides,
       }),
     );
   }

packages/bundler-webpack/package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "@swc/core": "1.3.24",
     "@types/cors": "^2.8.12",
+    "@types/webpack-bundle-analyzer": "^4.6.0",
     "@types/webpack-sources": "3.2.0",
     "@types/ws": "8.5.3",
     "autoprefixer": "10.4.13",

packages/bundler-webpack/src/types.ts

@@ -3,6 +3,7 @@ import type { HttpsServerOptions, ProxyOptions } from '@umijs/bundler-utils';
 import webpack, { Configuration } from '../compiled/webpack';
 import Config from '../compiled/webpack-5-chain';
 import type { TransformOptions as EsbuildOptions } from '@umijs/bundler-utils/compiled/esbuild';
+import type { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 export enum Env {
   development = 'development',
@@ -100,7 +101,7 @@ export interface IConfig {
   targets?: { [key: string]: any };
   writeToDisk?: boolean;
   babelLoaderCustomize?: string;
-  analyze?: Record<string, any>;
+  analyze?: BundleAnalyzerPlugin.Options;
   [key: string]: any;
 }