一、動(dòng)態(tài)加載能解決的問(wèn)題：
網(wǎng)站每增加一個(gè)功能/頁(yè)面就會(huì)增加代碼蝗碎，導(dǎo)致打包文件體積隨著功能的增加而增加善绎，文件過(guò)大部署以后訪問(wèn)速度緩慢；動(dòng)態(tài)加載可以把代碼拆分為多份捎谨，只加載需要的代碼民效。
二、使用：
1涛救、修改tsconfig.json
由于import()只是ECMAScript（JavaScript）提案畏邢，如果不加入"module": "esnext",編輯器會(huì)報(bào)紅
{
"compilerOptions": {
"noImplicitAny": false,
"declaration": false,
"target": "es6",
"module": "esnext", // 加入這句
...}
...}
2、使用react.lazy動(dòng)態(tài)導(dǎo)入組件：
lazy 函數(shù)允許您渲染動(dòng)態(tài)導(dǎo)入為常規(guī)組件州叠。
import React, { lazy, Suspense } from 'react';
const CIPage = lazy(() => import("./pages/ChangeIllness/index"));
export default class Test extends React.PureComponent<Props,any> {
render() {
return (
<div>
<Suspense fallback={<div className="com-loading">正在加載...</div>}>
<CIPage/>
</Suspense>
</div>
)
}
}
3棵红、必須使用Suspense：
如果在渲染時(shí)尚未加載包含 CIPage 的模塊，我們必須在等待加載時(shí)顯示一些后備內(nèi)容 - 例如加載指示符咧栗。 這是使用Suspense 組件完成的。
4虱肄、在路由中使用：
由于使用dva的router致板，直接component={CIPage}會(huì)報(bào)警告，component得是個(gè)函數(shù)啥的咏窿，所以必須寫成component={() => <CIPage />}
5斟或、完整代碼：
import React, { lazy, Suspense } from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { Router, Route, Switch, Redirect } from 'dva/router';
import Root from './layout/root';
// import CIPage from "./pages/ChangeIllness/index";
const CIPage = lazy(() => import("./pages/ChangeIllness/index"));
const BASE_URL = `${process.env.BASE_PATH}`;
const ROUT_ARR = [];
// 路由配置
function RouterConfig({ history, app }) {
return (
<ConfigProvider locale={zhCN}>
<Router history={history}>
<Suspense fallback={<div className="com-loading">正在加載...</div>}>
<Switch>
<Route path={`${BASE_URL}/changeIllness`} key='changeIllness' exact component={() => <CIPage />} />
<Route path="/" render={(props) => (
<Root>
<Switch>
{ROUT_ARR.map((item, i) => (
<Route path={`${BASE_URL}${item.path}`} key={i} exact component={item.component} />
))}
<Route path={BASE_URL === '' ? '/' : BASE_URL} exact render={() => <Redirect to={`${BASE_URL}/common`} />} />
</Switch>
</Root>
)} />
</Switch>
</Suspense>
</Router>
</ConfigProvider>
);
}
export default RouterConfig;
