diff --git a/.changeset/tough-ravens-dance.md b/.changeset/tough-ravens-dance.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/tough-ravens-dance.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/package.json b/packages/ui/package.json index 74a043b407a..bf3ee16b3dd 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -48,8 +48,9 @@ ], "scripts": { "build": "pnpm build:umd && pnpm build:esm", - "build:analyze": "rspack build --config rspack.config.js --env production --analyze", + "build:analyze": "rspack build --config rspack.config.js --env production --env analyze --analyze", "build:esm": "tsdown", + "build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production", "build:umd": "rspack build --config rspack.config.js --env production", "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json", "bundlewatch:fix": "node bundlewatch-fix.mjs", @@ -90,6 +91,7 @@ }, "devDependencies": { "@floating-ui/react-dom": "^2.1.6", + "@rsdoctor/rspack-plugin": "^0.4.13", "@rspack/cli": "^1.6.0", "@rspack/core": "^1.6.0", "@rspack/plugin-react-refresh": "^1.5.2", diff --git a/packages/ui/rspack.config.js b/packages/ui/rspack.config.js index a725da7c340..fbe4e7237bc 100644 --- a/packages/ui/rspack.config.js +++ b/packages/ui/rspack.config.js @@ -6,6 +6,7 @@ import { fileURLToPath } from 'url'; import { createRequire } from 'module'; import { merge } from 'webpack-merge'; import ReactRefreshPlugin from '@rspack/plugin-react-refresh'; +import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'; import { svgLoader, typescriptLoaderProd, typescriptLoaderDev } from '../../scripts/rspack-common.js'; const require = createRequire(import.meta.url); @@ -54,6 +55,14 @@ const common = ({ mode, variant }) => { new rspack.EnvironmentPlugin({ NODE_ENV: mode, }), + process.env.RSDOCTOR && + new RsdoctorRspackPlugin({ + mode: process.env.RSDOCTOR === 'brief' ? 'brief' : 'normal', + disableClientServer: process.env.RSDOCTOR === 'brief', + supports: { + generateTileGraph: true, + }, + }), ].filter(Boolean), output: { chunkFilename: `[name]_ui_[fullhash:6]_${packageJSON.version}.js`, @@ -179,10 +188,12 @@ const commonForProdBrowser = ({ targets = 'last 2 years', useCoreJs = false } = /** * Production configuration - builds UMD browser variants - * @param {'development'|'production'} mode + * @param {object} config + * @param {'development'|'production'} config.mode + * @param {boolean} config.analysis * @returns {import('@rspack/core').Configuration[]} */ -const prodConfig = mode => { +const prodConfig = ({ mode, analysis }) => { // Browser bundle with chunks (UMD) const uiBrowser = merge( entryForVariant(variants.uiBrowser), @@ -197,6 +208,11 @@ const prodConfig = mode => { commonForProdBrowser({ targets: packageJSON.browserslistLegacy, useCoreJs: true }), ); + // webpack-bundle-analyzer only supports a single build, use uiBrowser as that's the default build we serve + if (analysis) { + return [uiBrowser]; + } + return [uiBrowser, uiLegacyBrowser]; }; @@ -247,5 +263,6 @@ const devConfig = (mode, env) => { export default env => { const mode = env.production ? 'production' : 'development'; - return isProduction(mode) ? prodConfig(mode) : devConfig(mode, env); + const analysis = !!env.analyze; + return isProduction(mode) ? prodConfig({ mode, analysis }) : devConfig(mode, env); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39827075ee5..10b45161c90 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1012,6 +1012,9 @@ importers: '@floating-ui/react-dom': specifier: ^2.1.6 version: 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@rsdoctor/rspack-plugin': + specifier: ^0.4.13 + version: 0.4.13(@rspack/core@1.6.1(@swc/helpers@0.5.17))(bufferutil@4.0.9)(utf-8-validate@5.0.10)(webpack@5.102.1(esbuild@0.25.12)) '@rspack/cli': specifier: ^1.6.0 version: 1.6.1(@rspack/core@1.6.1(@swc/helpers@0.5.17))(@types/express@4.17.25)(bufferutil@4.0.9)(utf-8-validate@5.0.10)(webpack@5.102.1(esbuild@0.25.12))