diff --git a/packages/console/index.html b/packages/console/index.html index c20b63d96c2..a5603fdf399 100644 --- a/packages/console/index.html +++ b/packages/console/index.html @@ -3,8 +3,8 @@ - - + + diff --git a/packages/console/package.json b/packages/console/package.json index 0257eaed539..aee57fe6cc0 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -37,7 +37,6 @@ "@logto/react": "^3.0.12", "@logto/schemas": "workspace:^1.18.0", "@logto/shared": "workspace:^3.1.1", - "@mdx-js/mdx": "^3.0.1", "@mdx-js/react": "^3.0.1", "@mdx-js/rollup": "^3.0.1", "@monaco-editor/react": "^4.6.0", diff --git a/packages/console/vite.config.ts b/packages/console/vite.config.ts index 86aaa72cff3..27d6fb8aca6 100644 --- a/packages/console/vite.config.ts +++ b/packages/console/vite.config.ts @@ -8,7 +8,7 @@ import { defineConfig, mergeConfig, type UserConfig } from 'vite'; import viteCompression from 'vite-plugin-compression'; import svgr from 'vite-plugin-svgr'; -import { defaultConfig } from '../../vite.shared.config'; +import { defaultConfig, manualChunks } from '../../vite.shared.config'; // We need to explicitly import the `.env` file and use `define` later because we do not have a // prefix for our environment variables which it is required in Vite. @@ -50,6 +50,34 @@ const buildConfig = (mode: string): UserConfig => ({ // `@withtyped/client` needs this to be defined. We can optimize this later. 'process.env': {}, }, + build: { + rollupOptions: { + output: { + // Tip: You can use `pnpx vite-bundle-visualizer` to analyze the bundle size + manualChunks: (id, meta) => { + if (/\/node_modules\/(cose-base|layout-base|cytoscape|cytoscape-[^/]*)\//.test(id)) { + return 'cytoscape'; + } + + for (const largePackage of [ + 'libphonenumber-js', + 'mermaid', + 'elkjs', + 'katex', + 'refractor', + 'lodash', + 'lodash-es', + ]) { + if (id.includes(`/node_modules/${largePackage}/`)) { + return largePackage; + } + } + + return manualChunks(id, meta); + }, + }, + }, + }, }); export default defineConfig(({ mode }) => mergeConfig(defaultConfig, buildConfig(mode))); diff --git a/packages/demo-app/index.html b/packages/demo-app/index.html index be606dcc0a2..188fa3eff52 100644 --- a/packages/demo-app/index.html +++ b/packages/demo-app/index.html @@ -3,8 +3,8 @@ - - + + Logto Live Preview diff --git a/packages/experience/vite.config.ts b/packages/experience/vite.config.ts index 16c2f11675e..fd98110b280 100644 --- a/packages/experience/vite.config.ts +++ b/packages/experience/vite.config.ts @@ -27,13 +27,8 @@ const buildConfig = (mode: string): UserConfig => ({ target: browserslistToEsbuild('> 0.5%, last 2 versions, Firefox ESR, not dead'), rollupOptions: { output: { + // Tip: You can use `pnpx vite-bundle-visualizer` to analyze the bundle size manualChunks: (id, meta) => { - // Caution: React-related packages should be bundled together otherwise it will cause runtime errors - // Update this list if necessary when adding new React-related packages - if (/\/node_modules\/(react|react-[^/]*|@react-spring)\//.test(id)) { - return 'react'; - } - if (/\/node_modules\/i18next[^/]*\//.test(id)) { return 'i18next'; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7769155696..86b76b1e100 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2890,9 +2890,6 @@ importers: '@logto/shared': specifier: workspace:^3.1.1 version: link:../shared - '@mdx-js/mdx': - specifier: ^3.0.1 - version: 3.0.1 '@mdx-js/react': specifier: ^3.0.1 version: 3.0.1(@types/react@18.3.3)(react@18.3.1) @@ -15740,10 +15737,10 @@ snapshots: eslint-config-prettier: 9.1.0(eslint@8.57.0) eslint-config-xo: 0.44.0(eslint@8.57.0) eslint-config-xo-typescript: 4.0.0(@typescript-eslint/eslint-plugin@7.7.0(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3))(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3) - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-consistent-default-export-name: 0.0.15 eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-n: 17.2.1(eslint@8.57.0) eslint-plugin-no-use-extend-native: 0.5.0 eslint-plugin-prettier: 5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.0.0) @@ -18673,13 +18670,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.16.0 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.3 is-core-module: 2.13.1 @@ -18690,14 +18687,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7(supports-color@5.5.0) optionalDependencies: '@typescript-eslint/parser': 7.7.0(eslint@8.57.0)(typescript@5.5.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -18719,7 +18716,7 @@ snapshots: eslint: 8.57.0 ignore: 5.3.1 - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -18729,7 +18726,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -20298,7 +20295,7 @@ snapshots: strip-json-comments: 3.1.1 optionalDependencies: '@types/node': 20.12.7 - ts-node: 10.9.2(@swc/core@1.3.52)(@types/node@20.12.7)(typescript@5.5.3) + ts-node: 10.9.2(@swc/core@1.3.52(@swc/helpers@0.5.1))(@types/node@20.12.7)(typescript@5.5.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -24189,6 +24186,27 @@ snapshots: ts-interface-checker@0.1.13: {} + ts-node@10.9.2(@swc/core@1.3.52(@swc/helpers@0.5.1))(@types/node@20.12.7)(typescript@5.5.3): + dependencies: + '@cspotcode/source-map-support': 0.8.1 + '@tsconfig/node10': 1.0.9 + '@tsconfig/node12': 1.0.11 + '@tsconfig/node14': 1.0.3 + '@tsconfig/node16': 1.0.4 + '@types/node': 20.12.7 + acorn: 8.11.3 + acorn-walk: 8.3.2 + arg: 4.1.3 + create-require: 1.1.1 + diff: 4.0.2 + make-error: 1.3.6 + typescript: 5.5.3 + v8-compile-cache-lib: 3.0.1 + yn: 3.1.1 + optionalDependencies: + '@swc/core': 1.3.52(@swc/helpers@0.5.1) + optional: true + ts-node@10.9.2(@swc/core@1.3.52)(@types/node@20.12.7)(typescript@5.5.3): dependencies: '@cspotcode/source-map-support': 0.8.1 diff --git a/vite.shared.config.ts b/vite.shared.config.ts index b48c54abc19..5be30a792fd 100644 --- a/vite.shared.config.ts +++ b/vite.shared.config.ts @@ -2,9 +2,23 @@ import { Rollup, UserConfig } from 'vite'; -export const manualChunks: Rollup.GetManualChunk = (id) => { +export const manualChunks: Rollup.GetManualChunk = (id, { getModuleInfo }) => { + const hasReactDependency = (id: string): boolean => { + return getModuleInfo(id) + ?.importedIds + .some((importedId) => + importedId.includes('react') || + importedId.includes('react-dom') + ) ?? false; + } + + // Caution: React-related packages should be bundled together otherwise it will cause runtime errors + if (id.includes('/node_modules/') && hasReactDependency(id)) { + return 'react'; + } + if (id.includes('/@logto/')) { - return 'logto'; + return '@logto'; } if (id.includes('/node_modules/')) {