按需加载和代码分割

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

代码分割的其中一个方法是：引入动态的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文件。

代码分割方法二

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> ); } 基于路由的代码分割 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> );