Refactor router part. dynamic import router components for up development experience and reduce library volume

[HuberTRoy]

The components should be import just when user access them.

Problems & Solves:

1. All components will be load when user access one of those pages.

Use react lazy for router components.

2. router part does not in one file, the code logic maybe split-up.

Create router folder for manage router, move utils/route.ts to router/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.

[HuberTRoy]

Detail design plan:

Route file

Maybe like this.

const routes = [
    { path: "/account",  component: React.lazy(() => import('@/pages/xxx.tsx')) },
    { path: "/account/sub-page",  component: React.lazy(() => import('@/pages/xxxyyy.tsx')) }
]

export default renderRouter: FC = () =>  
<Suspend><Switch>{routes.map(({ path, component }) =><Route path={path} component={component} />)}</Switch></Suspend>

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:

1. 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.
2. Completely lazy load all components in router layer. Rollup and Vite can take this advantage for user(real user and developers).

[HuberTRoy]

Build config

1. 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".

2. 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.