按需加载和代码分割

   在用webpack打包react应用的时候，webpack会将整个应用打包成一个js文件，当用户访问首屏的时候，会一下子加载整个js文件，当项目较大时，首屏的加载时间将会变得很长，用户体验较差。
   代码分割是由webpack和Browserify等打包工具所支持的一项技术，它能够创建多个包并且进行动态的加载，它能够帮助你“懒加载”当前用户所需要的内容，能够显著提高应用的性能。尽管它不能减少代码的总体积，但是能够减少同一时间加载的代码数量，或者避免加载永远用不到的代码，提高系统性能。
   **

1. 代码分割方法一：

代码分割的其中一个方法是：引入动态的import**
传统的import用法：
import React, { PureComponent } from “react”;
import { add } from “./math”;
在编译的时候就完成了模块的加载。

class App extends PureComponent {
  handleClick = () => {
    console.log(add(16, 26));
  };
 
  render() {
    return <button onClick={this.handleClick}>add</button>;
  }
}
export default App;

动态import引入用法

import React, { PureComponent } from "react";
 
class App extends PureComponent {
  handleClick = () => {
    //动态加载
    import("./math").then(math => {
      console.log(math.add(16, 26));
    });
  };
 
  render() {
    return <button onClick={this.handleClick}>add</button>;
  }
}
export default App;

在点击事件发生时才动态加载js文件，而且import操作返回一个promise函数，返回其加载的js文件。

2. 代码分割方法二

React.lazy()方法：
使用之前：

import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

使用之后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

React.lazy函数是通过引入动态import函数，返回一个promise函数，完成懒加载。

如果在MyComponent组件加载完毕后，OtherComponent还没有加载完成，可以使用suspense加载指示器为懒加载的组件作出优雅的降级。fallback里可以包含任何组件没有加载完毕时展示的内容。它可以用来包裹多个懒加载的组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

3. 基于路由的代码分割

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);