阅读 1689

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 
 ```

 
复制代码
  1. 创建maincom.js
  export { MainCom as default } from "./main";
复制代码
  1. 路由引用
 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;
复制代码
  1. 路由加载
 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;

复制代码
文章分类
前端
文章标签