vue和react的路由懒加载

懒加载用于解决首屏加载缓慢的问题

原理

利用按需加载的思想，在第一次加载的过程中，只加载用户所看到的部分剩下的部分，加快了首屏加载的速度。其实不管是vue还是react,其路由懒加载的实现得益于wepack的异步模块打包，其原理就是利用es6 import()函数。这个import不是import命令。同样是引入模块，import命令是同步引入模块，而import()函数动态引入。当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成一个文件，当使用到这个文件的时候会这段代码才会被异步加载。

const a = () => import('./testComponent')

1.import()

符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的

//import 命令
import { add } from './math';

console.log(add(16, 26));

//import函数
import("./math").then(math => {
  console.log(math.add(16, 26));
});

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;
}

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

component：resolve=>([‘需要加载的路由的地址’，resolve])

2、es提出的import(推荐使用这种方式)

const HelloWorld = （）=>import(‘需要加载的模块地址’)
　　
react懒加载:
如何使用React.lazy

//OtherComponent.js 文件内容

import React from 'react'
const OtherComponent = ()=>{
  return (
    <div>
      我已加载
    </div>
  )
}
export default OtherComponent

// App.js 文件内容
import React from 'react';
import './App.css';

//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
  return (
    <div className="App">
      <OtherComponent/>
    </div>
  );
}
export default App;

这是最简单的React.lazy，但是这样页面会报错。这个报错提示我们，在React使用了lazy之后，会存在一个加载中的空档期，React不知道在这个空档期中该显示什么内容，所以需要我们指定。接下来就要使用到Suspense。

** Suspense**

如果在 App 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

import React, { Suspense, Component } from 'react';
import './App.css';

//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));

export default class App extends Component {
  state = {
    visible: false
  }
  render() {
    return (
      <div className="App">
        <button onClick={() => {
          this.setState({ visible: true })
        }}>
          加载OtherComponent组件
        </button>
        <Suspense fallback={<div>Loading...</div>}>
          {
            this.state.visible
              ?
              <OtherComponent />
              :
              null
          }
        </Suspense>
      </div>
    )
  }
}