React项目：代码分片、按需加载（code splitting）/ 免webpack配置

超、凢脫俗 2022-06-05 07:20 213阅读 0赞

# 为什么需要代码分片 #

Facebook 的 [create-react-app][] 是一款非常优秀的开发脚手架。它为我们生成了 React 开发环境，自带 webpack 默认配置。 它会通过 webpack 打包我们的应用，产生一个 `bundle.js` 文件。随着我们的项目越写越复杂，`bundle.js` 文件会随之增大。

由于该文件是唯一的，所以不管用户查看哪个页面、使用哪个功能，都必须先下载所有的功能代码。

当 `bundle.js` 大到一定程度，就会明显影响用户体验。

此时，我们就需要 code splitting ，将代码分片，实现按需异步加载，从而优化应用的性能。

# 代码分片的原理 #

ES模块（ECMAScript modules）都是静态的。编译时就必须指明 确定的导入（import）和导出（export）。 这也是规定 import 声明必须出现在模块顶部的原因所在。

但是我们可以通过 [`dynamic import()`][dynamic import] 来实现动态加载的功能。 `dynamic import()` 是 stage 3 中的一个提案。这是一个 运算符 operator 而非函数 function 。 我们把模块的名字作为参数传入，它会返回一个 Promise ，当模块加载完成后，该 Promise 就会 fulfilled。

当你在代码中新增了一个 `import()` ，用它动态导入模块时， Webpack 2 会自动据此完成代码分片，不需要任何额外的手动配置。

# 以路由为中心进行代码分片 #

React 项目中的路由一般用 React Router，它可以将多页面的应用构建为 SPA ，即单页面应用。

此处，我们以其最新版 React Router v4 为例。

分片前

... ...
    import {requireAuthentication} from './CheckToken'
    import Home from '../components/Home/Home'
    import Login from './LoginContainer'
    import Signup from './SignupContainer'
    import Profile from './ProfileContainer'
    ... ...
    <Router>
           <Switch>
             <Route exact path='/' component={Home} />
             <Route path='/login' component={Login} />
             <Route path='/signup' component={Signup} />
             <Route path='/profile' component={requireAuthentication(Profile)} />
    ... ...

分片后

新增 `AsyncComponent`，它将接受一个函数作为参数，实现异步地动态加载组件。例如：

const AsyncLogin = asyncComponent(() => import('./LoginContainer'))

至于为什么是以 `() => import('./LoginContainer')` 这样的箭头函数为参数，而非 `'./LoginContainer'` 这样的字符串，和 Webpack 的进行代码分片的机制有关。

这么写看起来啰嗦，但可以让我们控制生成多少个 `.chunk.js` 这样的分片文件。

代码：

import React, { Component } from 'react'
    
    export default function asyncComponent(importComponent) {
      class AsyncComponent extends Component {
        constructor(props) {
          super(props)
    
          this.state = {
            component: null
          }
        }
    
        async componentDidMount() {
          const { default: component } = await importComponent()
    
          this.setState({
            component: component
          })
        }
    
        render() {
          const C = this.state.component
    
          return C ? <C {...this.props} /> : null
        }
      }
    
      return AsyncComponent
    }

路由

... ...
    import {requireAuthentication} from './CheckToken'
    import asyncComponent from './AsyncComponent'
    
    const AsyncHome = asyncComponent(() => import('../components/Home/Home'))
    const AsyncLogin = asyncComponent(() => import('./LoginContainer'))
    const AsyncSignup = asyncComponent(() => import('./SignupContainer'))
    const AsyncProfile = asyncComponent(() => import('./ProfileContainer'))
    ... ...
    <Router>
           <Switch>
             <Route exact path='/' component={AsyncHome} />
             <Route path='/login' component={AsyncLogin} />
             <Route path='/signup' component={AsyncSignup} />
             <Route path='/profile' component={requireAuthentication(AsyncProfile)} />
    ... ...

此时再运行 `npm run build`，看编译的log，以及 `build/static/js/` 目录下的 js 文件，会发现多出了若干文件名 `.chunk.js` 结尾的文件。

`npm start` 把项目跑起来，在 chrome 的 devTool 中，打开 `Network` ,查看 `JS` ，就可以看到异步动态按需加载分片文件的效果了。

# 以组件为中心进行代码分片 #

上面一小节是以路由为中心进行代码分片的思路与实现。但是 [React Router ][React Router]官网说得明白，React Router 是导航组件的集合。

即，路由本身并没有什么特别的，它们也是组件。

如果以组件为中心进行代码分片，会带来额外的好处：

*  除了路由此外，还有很多地方可以进行代码分片。广阔天地，大有作为。
 *  同一个组件中，针对不急着显示的东西，可以延迟其加载。
 *  ... ...

这里介绍 [React Loadable][] 。

通过它，我们可以用使用 React [高阶组件][Link 1] （Higher Order Component / HOC）实现异步加载 React 组件的功能，同时处理操作失败、网络错误等等边缘情况。

注：一个高阶组件，简言之就是一个函数，它接受的参数是 React 组件，返回的结果也是 React 组件。

React Loadable 可以通过 npm 安装 `react-loadable`。

首先，我们用 React Loadable 来重构刚才的代码

处理边缘情况的组件

import React from 'react'
    
    const MyLoadingComponent = ({isLoading, error}) => {
      // 加载中
      if (isLoading) {
        return <div>Loading...</div>
      }
      // 加载出错
      else if (error) {
        return <div>Sorry, there was a problem loading the page.</div>
      }
      else {
        return null
      }
    }
    
    export default LoadingComponent

路由

... ...
    import {requireAuthentication} from './CheckToken'
    import Loadable from 'react-loadable'
    import LoadingComponent from '../components/common/Loading'
    
    const AsyncHome = Loadable({
      loader: () => import('../components/Home/Home'),
      loading: LoadingComponent
    })
    const AsyncSignup = Loadable({
      loader: () => import('./SignupContainer'),
      loading: LoadingComponent
    })
    const AsyncLogin = Loadable({
      loader: () => import('./LoginContainer'),
      loading: LoadingComponent
    })
    const AsyncProfile = Loadable({
      loader: () => import('./ProfileContainer'),
      loading: LoadingComponent
    })
    
    ... ...
          <Router>
            <Switch>
              <Route exact path='/' component={AsyncHome} />
              <Route path='/login' component={AsyncLogin} />
              <Route path='/signup' component={AsyncSignup} />
              <Route path='/profile' component={requireAuthentication(AsyncProfile)} />
    ... ...

## 进一步优化 ##

重新运行项目，发现了可以进一步改进的地方。

### 防止 Loading 组件闪现 ###

在页面跳转的时候，屏幕上会短暂的闪过 LoadingComponent 组件。

显然，如果网络良好，跳转足够快，LoadingComponent 组件根本没有必要出现。

React Loadable 可以很容易地实现这个功能。

LoadingComponent 组件接收一个 pastDelay 属性，该属性仅仅在延迟超过一个规定的值后才为 true 。

默认的延迟是 200ms，我们也可以自己指定别的时长。操作如下，我们将其设置为 300ms。

... ...
    const AsyncLogin = Loadable({
      loader: () => import('./LoginContainer'),
      loading: LoadingComponent,
      delay: 300
    })
    ... ...

LoadingComponent 组件做相应调整。同时增加一些简单的样式。

import React from 'react'
    import Footer from '../Footer/Footer'
    import styled from 'styled-components'
    
    const Wrap = styled.div`
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #B2EBF2;
      text-align: center;
    `
    
    const LoadingComponent = (props) => {
      if (props.error) {
        return (
          <Wrap>
            <div>Error!</div>
            <Footer />
          </Wrap>
        )
      } else if (props.pastDelay) {
        // 300ms 之后显示
        return (
          <Wrap>
            <div>信息请求中...</div>
            <Footer />
          </Wrap>
        )
      } else {
        return null
      }
    }
    
    export default LoadingComponent

### 同一个组件中，延迟加载不急着显示的内容 ###

例如这个组件，TopHeader 是优先显然的内容，Notification 是不一定显示的内容。我们可以推迟后者的加载。

... ...
    import TopHeader from '../components/Header/TopHeader'
    import Notification from './NotificationContainer'
    
    class TopHeaderContainer extends Component {
      ... ...
    
        return (
          <div>
            <TopHeader
              sideButtons={tempIsAuthenticated}
              logout={this.logout}
            />
            <Notification />
          </div>
    
        )
    }
    ... ...
    export default connect(mapStateToProps, { logout })(TopHeaderContainer)

优化后

... ...
    import TopHeader from '../components/Header/TopHeader'
    
    import Loadable from 'react-loadable'
    import LoadingComponent from '../components/common/Loading'
    
    const AsyncNotification = Loadable({
      loader: () => import('./NotificationContainer'),
      loading: LoadingComponent,
      delay: 300
    })
    ... ...
    class TopHeaderContainer extends Component {
      ... ...
      
        return (
          <div>
            <TopHeader
              sideButtons={tempIsAuthenticated}
              logout={this.logout}
            />
            <AsyncNotification />
          </div>
        )
      }
    }
    ... ...
    export default connect(mapStateToProps, { logout })(TopHeaderContainer)
    ... ...

此外， 还可以实现 预加载（如 click 按钮显示某组件，那么在 hover 事件时就预先加载之）、服务端渲染 等等。

在此就不多做介绍了。

## 参考资料 ##

*  [ES proposal: import() – dynamically importing ES modules][dynamic import]
 *  [Code Splitting in Create React App][]
 *  [Component-centric code splitting and loading in React][]
 *  [@dan\_abramov][dan_abramov]

[create-react-app]: https://github.com/facebookincubator/create-react-app/
[dynamic import]: http://2ality.com/2017/01/import-operator.html#loading-code-on-demand
[React Router]: https://reacttraining.com/react-router/
[React Loadable]: https://github.com/thejameskyle/react-loadable
[Link 1]: https://reactjs.org/docs/higher-order-components.html
[Code Splitting in Create React App]: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
[Component-centric code splitting and loading in React]: http://thejameskyle.com/react-loadable.html
[dan_abramov]: https://twitter.com/dan_abramov/status/866646657437491201