You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When someone want to add a new route just expend routes object add a path and component.
Route component may not expect props. If there some data want to cross-page transfer, URL query may be the first choice.
Advantage than now:
Searchable and no split-up logical code for maintaining: All routing information could be find in router folder. Other developers just copy the current URL and search, then will find what component current rendered.
Completely lazy load all components in router layer. Rollup and Vite can take this advantage for user(real user and developers).
non-node_modules file
If lazy load all components rollup will code-split default, but in this project, the single file may very tiny(< 10kb most may < 1kb). So depend on the file's location folder pick up them may is the plan. e.g: "src/components/a.tsx" and "src/components/b.tsx" will pick up to "components.js".
node_modules file
Now all node_modules file will pick up to vendor. It's too large(22/3.4Mb no gzip/gzip).
Optimize plan:
For the very common node_modules files(antd, lodash...) pick them to vendor.
For those using frequency > 25%(or higher), pick them to one file.
For the low frequency file just let them to a single file.
The components should be import just when user access them.
Problems & Solves:
Use react
lazy
for router components.Create
router
folder for manage router, moveutils/route.ts
torouter/router.ts
.Export both components and path, use loop instead of manually add new route.
Now:
Static import all components on the entry file.
4.1Mb size will be transfer in the first access.
Router components and router path split on the different file.
Expect:
Use dynamic import replace static import for router components and the components that not be used immediately.
All router logic code in
router
folder.1Mb size for necessary base library, other pages load when user access or pre-fetch on idle time.
The text was updated successfully, but these errors were encountered: