React学习----路由懒加载

React 使用webpack 打包时，会生成一个main.js的文件。当页面组件增多时，main.js 也跟着变大，从而减慢页面的加载速度。使用 compression-webpack-plugin 配合 nginx，将文件压缩，这种方法可行，但是加载首页的时候，效果还是不理想。于是，想到了把main.js 拆分多个。从而减少首屏js大小，加快加载速度。

未用懒加载

Index 组件：

class Index extends React.Component {
   ...
}
export default Index;

路由引用：

import { Route,Switch } from 'react-router-dom';
import indexcomfrom '../views/index/index';
class RouterConfig extends React.Component{
   render(){
       return(
       
               <Switch>
 ...
 <Route exact path="/" component={ indexcom } />
...
               </Switch>
   
       )
   }
}
export default RouterConfig;

这种方式打包，会把代码全部打包在main.js中。

用懒加载

两种方式可实现:

1. 使用 React 中 Suspense,lazy
2. 使用 react-loadable
   当使用路由懒加载，在组件中使用 import 引用 css 时，报错。

```
 improt './index.css'
///  main.4d17afb4df2a6b00a18c.js?4d17afb4df2a6b00a18c:1 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
```

未解决，于是便把样式全部放进 入口 index.js 中引用。

React 中 Suspense,lazy

1. 创建main.js ：

 ```
  class Main extends React.Component  {
    
  }
  export const MainCom = Main 
 ```

2. 创建maincom.js

  export { MainCom as default } from "./main";

3. 路由引用

 import { Route,Switch } from 'react-router-dom';
const MainCom = lazy(() => import('../views/main/maincom') );
class RouterConfig extends React.Component{
 render(){
     return(
      <Suspense fallback={ <div> 加载中  </div> }>
             <Switch>
...
<Route exact path="/" component={ MainCom } />
...
             </Switch>
 
 </Suspense>
     )
 }
}
export default RouterConfig;

react-loadable

1. login 组件：

class Loginextends React.Component {
   ...
}
export default Login;

2. 路由加载

 import { Route,Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
 const logincom = Loadable({
   loader : () => import('../views/login/login'),
   loading() {
   return <div>正在加载</div>
 },
 })
class RouterConfig extends React.Component{
   render(){
       return(
        <Suspense fallback={ <div> 加载中  </div> }>
               <Switch>
 ...
 <Route exact path="/" component={ logincom } />
...
               </Switch>
   
   </Suspense>
       )
   }
}
export default RouterConfig;