React路由懒加载的实现

• 原理
• webpack代码分割

• React利用 React.lazy与import()实现了渲染时的动态加载
• 利用Suspense来处理异步加载资源时页面应该如何显示的问题

• 1.React.lazy

• 通过lazy() api来动态import需要懒加载的组件
• import的组件目前只支持export default的形式导出
• Suspense来包裹懒加载的组件进行加载，可以设置fallback现实加载中效果

• React.lazy可以结合Router来对模块进行懒加载。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'))
const AnyComponent = lazy(() => import('./routes/AnyComponent'))

...
return (
  
    Loading...

}> ...

• 2.react-loadable

react-loadable是以组件级别来分割代码的，这意味着，我们不仅可以根据路由按需加载，还可以根据组件按需加载，使用方式和路由分割一样，只用修改组件的引入方式即可

// 路由懒加载（异步组件）
import Loadable from 'react-loadable';
//通用过场组件
const LoadingComponent = () => {
  return (
    
loading
  )
}
...
export default (loader, loading=LoadingComponent) => {
  return Loadable({
    loader,
    loading
  })
}

//Route中调用
import { BrowserRouter, Route } from 'react-router-dom'
const loadable from './loadable';
const AnyComponent = loadable(() => import('./AnyComponent'))
const Routes = () => (
  
    
  
);
export default Routes;

以下是老版中的方法

• 3.webpack配置中使用lazyload-loader

  // webpack 配置中
  module: {
   rules: [
   {
   test: /.(js|jsx)$/,,
   use: [
   'babel-loader',
   'lazyload-loader'
   ]
  },
  
  // 业务代码中
  // 使用lazy! 前缀 代表需要懒加载的Router
   import Shop from 'lazy!./src/view/Shop';
   // Router 正常使用
   

• 4.import() webpack v2+

• 符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象

• function component() {
   return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
   var element = document.createElement('div');
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   return element;
   }).catch(error => 'An error occurred while loading the component');
  }
  // 或者使用async
  async function getComponent() {
   var element = document.createElement('div');
   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   return element;
  }

• 5.requre.ensure webpack v1 v2

require.ensure([], function(require){
 var list = require('./list');
 list.show();
，'list');

const Foo = require.ensure([], () => {
 require("Foo");
}, err => {
 console.error("We failed to load chunk: " + err);
}, "chunk-name");
//react-router2 or 3