Skip to content

Commit a1fda3c

Browse files
hengwangsayhengwangsay
committed
feat: support dynamic router preload
1 parent 737e031 commit a1fda3c

File tree

22 files changed

+354
-220
lines changed

22 files changed

+354
-220
lines changed

‎package.json‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
},
1717
"dependencies": {
1818
"@chakra-ui/react": "^2.2.1",
19-
"@emotion/react": "^11.9.0",
19+
"@emotion/react": "^11.9.3",
2020
"@emotion/server": "^11.4.0",
21-
"@emotion/styled": "^11.8.1",
21+
"@emotion/styled": "^11.9.3",
2222
"axios": "^0.27.2",
2323
"chalk": "4",
2424
"compression": "^1.7.4",
@@ -28,13 +28,13 @@
2828
"express": "^4.18.1",
2929
"express-session": "^1.17.3",
3030
"framer-motion": "^6.3.11",
31-
"immer": "^9.0.14",
31+
"immer": "^9.0.15",
3232
"js-cookie": "^3.0.1",
3333
"lodash": "^4.17.21",
3434
"multer": "^1.4.4",
3535
"pretty-error": "^4.0.0",
36-
"react": "^18.1.0",
37-
"react-dom": "^18.1.0",
36+
"react": "^18.2.0",
37+
"react-dom": "^18.2.0",
3838
"react-helmet-async": "^1.3.0",
3939
"react-intl": "^6.0.4",
4040
"react-redux": "^8.0.2",
@@ -49,7 +49,7 @@
4949
},
5050
"devDependencies": {
5151
"@babel/cli": "^7.17.10",
52-
"@babel/core": "^7.18.2",
52+
"@babel/core": "^7.18.5",
5353
"@babel/plugin-proposal-class-properties": "^7.17.12",
5454
"@babel/plugin-proposal-decorators": "^7.18.2",
5555
"@babel/plugin-proposal-export-default-from": "^7.17.12",
@@ -58,7 +58,7 @@
5858
"@babel/plugin-proposal-private-methods": "^7.17.12",
5959
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
6060
"@babel/plugin-transform-modules-commonjs": "^7.18.2",
61-
"@babel/plugin-transform-runtime": "^7.18.2",
61+
"@babel/plugin-transform-runtime": "^7.18.5",
6262
"@babel/preset-env": "^7.18.2",
6363
"@babel/preset-react": "^7.17.12",
6464
"@babel/preset-typescript": "^7.17.12",
@@ -72,20 +72,20 @@
7272
"@types/js-cookie": "^3.0.2",
7373
"@types/lodash": "^4.14.182",
7474
"@types/multer": "^1.4.7",
75-
"@types/node": "^17.0.42",
75+
"@types/node": "^18.0.0",
7676
"@types/react": "^18.0.12",
7777
"@types/react-dom": "^18.0.5",
7878
"@types/webpack": "^5.28.0",
7979
"@types/webpack-env": "^1.17.0",
8080
"@types/webpack-hot-middleware": "^2.25.6",
81-
"@typescript-eslint/eslint-plugin": "^5.27.1",
82-
"@typescript-eslint/parser": "^5.27.1",
81+
"@typescript-eslint/eslint-plugin": "^5.28.0",
82+
"@typescript-eslint/parser": "^5.28.0",
8383
"autoprefixer": "^10.4.7",
8484
"babel-jest": "^28.1.1",
8585
"babel-loader": "^8.2.5",
8686
"babel-plugin-import": "^1.13.5",
8787
"clean-webpack-plugin": "^4.0.0",
88-
"core-js": "^3.22.8",
88+
"core-js": "^3.23.1",
8989
"cross-env": "^7.0.3",
9090
"css-loader": "^6.7.1",
9191
"css-minimizer-webpack-plugin": "^4.0.0",
@@ -96,25 +96,25 @@
9696
"eslint-plugin-jsx-a11y": "^6.5.1",
9797
"eslint-plugin-prettier": "^4.0.0",
9898
"eslint-plugin-react": "^7.30.0",
99-
"eslint-plugin-react-hooks": "^4.5.0",
99+
"eslint-plugin-react-hooks": "^4.6.0",
100100
"eslint-webpack-plugin": "^3.1.1",
101101
"file-loader": "^6.2.0",
102102
"fork-ts-checker-webpack-plugin": "^7.2.11",
103103
"identity-obj-proxy": "^3.0.0",
104104
"jest": "^28.1.1",
105-
"mini-css-extract-plugin": "^2.6.0",
105+
"mini-css-extract-plugin": "^2.6.1",
106106
"nodemon": "^2.0.15",
107107
"postcss": "^8.4.14",
108108
"postcss-loader": "^7.0.0",
109-
"prettier": "^2.6.2",
110-
"react-refresh": "^0.13.0",
109+
"prettier": "^2.7.0",
110+
"react-refresh": "^0.14.0",
111111
"sass": "^1.52.3",
112112
"sass-loader": "^13.0.0",
113113
"style-loader": "^3.3.1",
114114
"thread-loader": "^3.0.4",
115115
"typescript": "^4.7.3",
116116
"webpack-bundle-analyzer": "^4.5.0",
117-
"webpack-cli": "^4.9.2",
117+
"webpack-cli": "^4.10.0",
118118
"webpack-dev-middleware": "^5.3.3",
119119
"webpack-dev-server": "^4.9.2",
120120
"webpack-hot-middleware": "^2.25.1",

‎script/dynamic.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ class DynamicRouter {
1313
getRouterConfig = (prePath, dirName) => {
1414
return new Promise((resolve) => {
1515
const routes = [];
16+
let indexPath = 0;
1617
let dynamicPath = 0;
18+
let fallbackPath = 0;
19+
const chunkPrePath = prePath.replaceAll("/", "-");
1720
fs.promises
1821
.readdir(dirName, { withFileTypes: true })
1922
.then((files) =>
@@ -29,11 +32,30 @@ class DynamicRouter {
2932
dynamicPath++;
3033
const [, params] = Array.from(dynamicPathReg.exec(fileName));
3134
config.path = `${prePath}:${params}`;
35+
config.chunkName = `${chunkPrePath}-dynamic_${params}`.toLowerCase();
3236
} else {
3337
throw new Error(`file router dynamicPath duplicate`);
3438
}
39+
} else if (fileName.toLowerCase() === "index") {
40+
// 默认路由, 同一级只应该有一个
41+
if (indexPath === 0) {
42+
indexPath++;
43+
config.path = `${prePath}`;
44+
config.chunkName = `${chunkPrePath}-index`.toLowerCase();
45+
} else {
46+
throw new Error("file router default path duplicate");
47+
}
48+
} else if (fileName === "404") {
49+
if (prePath === "/") {
50+
fallbackPath++;
51+
config.path = `${prePath}*`;
52+
config.chunkName = `${chunkPrePath}-${fileName}`.toLowerCase();
53+
} else {
54+
throw new Error(`can not add 404 page on the ${prePath}`);
55+
}
3556
} else {
3657
config.path = `${prePath}${fileName}`;
58+
config.chunkName = `${chunkPrePath}-${fileName}`.toLowerCase();
3759
}
3860
config.componentPath = `${prePath.slice(1)}${fileName}`;
3961
// 文件名字重复
@@ -54,6 +76,12 @@ class DynamicRouter {
5476
// 如果存在动态路由 进行排序放在当前层级最后面
5577
routes.sort((_, t) => (/^\[(.*)\]$/.test(t.path) ? -1 : 0));
5678
}
79+
if (indexPath === 1) {
80+
routes.sort((_, t) => (t.path.endsWith("/") ? 1 : 0));
81+
}
82+
if (fallbackPath === 1) {
83+
routes.sort((_, b) => (b.path === "/*" ? -1 : 0));
84+
}
5785
})
5886
.then(() => resolve(routes))
5987
.catch((e) => console.log(chalk.red(`file router error, ${e.toString()}`)));

‎src/components/Layout.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ export const Layout: PreLoadComponentType = () => {
1313
<div className={style.container}>
1414
<Header />
1515
<main className={style.content}>
16-
<Suspense>
17-
<Outlet />
18-
</Suspense>
16+
<Outlet />
1917
<hr />
2018
</main>
2119
<Suspense>

‎src/components/UI.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/module/Bar/index.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.c {
2+
border: 1px solid red;
3+
color: blue;
4+
}

‎src/module/Bar/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import style from "./index.module.scss";
2+
3+
export default function Index() {
4+
return <div className={style.c}>this is module Bar file</div>;
5+
}

‎src/pages/ChakraUi.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function ChakraComponent() {
2121
</Box>
2222
</Fade>
2323

24-
<Menu>
24+
<Menu isLazy>
2525
{({ isOpen }) => (
2626
<>
2727
<MenuButton isActive={isOpen} as={Button} rightIcon={<span>{1234}</span>}>

‎src/pages/Home.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
import { lazy, Suspense } from "react";
2+
3+
const BB = lazy(() => import("../module/Bar"));
4+
15
export default function Home() {
2-
return <div>home page</div>;
6+
return (
7+
<div>
8+
home
9+
<BB />
10+
<Suspense></Suspense>
11+
</div>
12+
);
313
}

‎src/pages/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Index() {
2+
return <div>home page</div>;
3+
}

‎src/router/dynamicRoutes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/* do not editor this template */
33
import type { DynamicRouteConfig } from "types/router";
44

5-
export const dynamicRouteConfig: DynamicRouteConfig[] = [{"path":"/404","componentPath":"404"},{"path":"/ChakraUi","componentPath":"ChakraUi"},{"path":"/Great","componentPath":"Great"},{"path":"/Home","componentPath":"Home"},{"path":"/I18n","componentPath":"I18n"},{"path":"/Tcc","componentPath":"Tcc"},{"path":"/Tdd","componentPath":"Tdd"},{"path":"/Foo/:id","componentPath":"Foo/:id"},{"path":"/Foo/Gff","componentPath":"Foo/Gff"}];
5+
export const dynamicRouteConfig: DynamicRouteConfig[] = [{"path":"/ChakraUi","chunkName":"--chakraui","componentPath":"ChakraUi"},{"path":"/Great","chunkName":"--great","componentPath":"Great"},{"path":"/Home","chunkName":"--home","componentPath":"Home"},{"path":"/I18n","chunkName":"--i18n","componentPath":"I18n"},{"path":"/Tcc","chunkName":"--tcc","componentPath":"Tcc"},{"path":"/Tdd","chunkName":"--tdd","componentPath":"Tdd"},{"path":"/","chunkName":"--index","componentPath":"index"},{"path":"/Foo/:id","chunkName":"-foo--dynamic_id","componentPath":"Foo/:id"},{"path":"/Foo/Gff","chunkName":"-foo--gff","componentPath":"Foo/Gff"},{"path":"/*","chunkName":"--404","componentPath":"404"}];

0 commit comments

Comments
 (0)