Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console, experience): optimize bundling (#6326)

Browse source 
* refactor(console, experience): optimize bundling

* fix: use correct favicon paths

* chore: use dynamic react dependency checking in bundling
This commit is contained in:
Gao Sun 2024-07-25 10:07:28 +08:00 committed by GitHub
parent 0d290cd2ab
commit d7b6987b48
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 81 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/index.html
View file

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="./src/apple-touch-icon.png">
<link rel="icon" href="./favicon.ico" /> <link rel="icon" href="./src/favicon.ico" />
</head> </head>
<body> <body>

1
packages/console/package.json
View file

@ -37,7 +37,6 @@
"@logto/react": "^3.0.12", "@logto/react": "^3.0.12",
"@logto/schemas": "workspace:^1.18.0", "@logto/schemas": "workspace:^1.18.0",
"@logto/shared": "workspace:^3.1.1", "@logto/shared": "workspace:^3.1.1",
"@mdx-js/mdx": "^3.0.1",
"@mdx-js/react": "^3.0.1", "@mdx-js/react": "^3.0.1",
"@mdx-js/rollup": "^3.0.1", "@mdx-js/rollup": "^3.0.1",
"@monaco-editor/react": "^4.6.0", "@monaco-editor/react": "^4.6.0",

30
packages/console/vite.config.ts
View file

@ -8,7 +8,7 @@ import { defineConfig, mergeConfig, type UserConfig } from 'vite';
import viteCompression from 'vite-plugin-compression'; import viteCompression from 'vite-plugin-compression';
import svgr from 'vite-plugin-svgr'; 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 // 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. // 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. // `@withtyped/client` needs this to be defined. We can optimize this later.
'process.env': {}, '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))); export default defineConfig(({ mode }) => mergeConfig(defaultConfig, buildConfig(mode)));

4
packages/demo-app/index.html
View file

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="./src/apple-touch-icon.png">
<link rel="icon" href="./favicon.ico" /> <link rel="icon" href="./src/ffavicon.ico" />
<title>Logto Live Preview</title> <title>Logto Live Preview</title>
</head> </head>

7
packages/experience/vite.config.ts
View file

@ -27,13 +27,8 @@ const buildConfig = (mode: string): UserConfig => ({
target: browserslistToEsbuild('> 0.5%, last 2 versions, Firefox ESR, not dead'), target: browserslistToEsbuild('> 0.5%, last 2 versions, Firefox ESR, not dead'),
rollupOptions: { rollupOptions: {
output: { output: {
// Tip: You can use `pnpx vite-bundle-visualizer` to analyze the bundle size
manualChunks: (id, meta) => { 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)) { if (/\/node_modules\/i18next[^/]*\//.test(id)) {
return 'i18next'; return 'i18next';
} }

44
pnpm-lock.yaml
View file

@ -2890,9 +2890,6 @@ importers:
'@logto/shared': '@logto/shared':
specifier: workspace:^3.1.1 specifier: workspace:^3.1.1
version: link:../shared version: link:../shared
'@mdx-js/mdx':
specifier: ^3.0.1
version: 3.0.1
'@mdx-js/react': '@mdx-js/react':
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1(@types/react@18.3.3)(react@18.3.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-prettier: 9.1.0(eslint@8.57.0)
eslint-config-xo: 0.44.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-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-consistent-default-export-name: 0.0.15
eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0) 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-n: 17.2.1(eslint@8.57.0)
eslint-plugin-no-use-extend-native: 0.5.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) 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: transitivePeerDependencies:
- supports-color - 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: dependencies:
debug: 4.3.4 debug: 4.3.4
enhanced-resolve: 5.16.0 enhanced-resolve: 5.16.0
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)(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)
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)
fast-glob: 3.3.2 fast-glob: 3.3.2
get-tsconfig: 4.7.3 get-tsconfig: 4.7.3
is-core-module: 2.13.1 is-core-module: 2.13.1
@ -18690,14 +18687,14 @@ snapshots:
- eslint-import-resolver-webpack - eslint-import-resolver-webpack
- supports-color - 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: dependencies:
debug: 3.2.7(supports-color@5.5.0) debug: 3.2.7(supports-color@5.5.0)
optionalDependencies: optionalDependencies:
'@typescript-eslint/parser': 7.7.0(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 eslint: 8.57.0
eslint-import-resolver-node: 0.3.9 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: transitivePeerDependencies:
- supports-color - supports-color
@ -18719,7 +18716,7 @@ snapshots:
eslint: 8.57.0 eslint: 8.57.0
ignore: 5.3.1 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: dependencies:
array-includes: 3.1.8 array-includes: 3.1.8
array.prototype.findlastindex: 1.2.5 array.prototype.findlastindex: 1.2.5
@ -18729,7 +18726,7 @@ snapshots:
doctrine: 2.1.0 doctrine: 2.1.0
eslint: 8.57.0 eslint: 8.57.0
eslint-import-resolver-node: 0.3.9 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 hasown: 2.0.2
is-core-module: 2.13.1 is-core-module: 2.13.1
is-glob: 4.0.3 is-glob: 4.0.3
@ -20298,7 +20295,7 @@ snapshots:
strip-json-comments: 3.1.1 strip-json-comments: 3.1.1
optionalDependencies: optionalDependencies:
'@types/node': 20.12.7 '@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: transitivePeerDependencies:
- babel-plugin-macros - babel-plugin-macros
- supports-color - supports-color
@ -24189,6 +24186,27 @@ snapshots:
ts-interface-checker@0.1.13: {} 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): ts-node@10.9.2(@swc/core@1.3.52)(@types/node@20.12.7)(typescript@5.5.3):
dependencies: dependencies:
'@cspotcode/source-map-support': 0.8.1 '@cspotcode/source-map-support': 0.8.1

18
vite.shared.config.ts
View file

@ -2,9 +2,23 @@
import { Rollup, UserConfig } from 'vite'; 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/')) { if (id.includes('/@logto/')) {
return 'logto'; return '@logto';
} }
if (id.includes('/node_modules/')) { if (id.includes('/node_modules/')) {