在 React 中使用Code Splitting实现按需加载

一、明确概念

◆ Code Splitting（代码分离）

Code Splitting 是 webpack 作为打包工具的核心特征。它通过分离点（逻辑断点）的形式将代码拆分成Chunk，在分离点中依赖的模块会被打包到一起，实现异步加载。一个分离点会产生一个打包文件，从而减小资源体积，缩短加载时间。webpack 中文指南#代码分离 对此概念进行了详细的介绍，指出三种最常用的代码分离方法：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk，用于分离第三方库。
• 动态导入：通过模块的内联函数调用来分离代码。

另外，一些有助于代码分离的插件和 loaders：

• ExtractTextPlugin: 用于将 CSS 从主应用程序中分离。
• bundle-loader: 用于分离代码和延迟加载生成的 bundle。
• promise-loader: 类似于 bundle-loader，但是使用的是 promises。

◆ 按需加载（或懒加载）

Code Splitting 仅仅是分离了代码，仍然会提前加载完所有模块。它虽然减小了应用的总体体积，在控制资源加载优先级的情况下，可以加快应用的加载速度（首页渲染），但是也同时也增加了 http 请求数，并非真正意义上的按需加载。不过，Code Splitting 却为按需加载提供了很好的途径。

要实现真正意义上的按需加载（或懒加载），就需要结合用户的交互：当只有在用户访问某个功能的时候才加载该部分的代码，没有用到的代码块可能永远都不会被加载，这样就可以更好地提升性能。

二、在 React 中实现按需加载

一般，在使用 webpack 时，我们已经进行了代码分离：抽离 css，抽离第三方库到 vendor.js 中，而将自己写的源码打包到 bundle.js 中，如下图中给出了对webpack.config.js的基础配置：

在webpack中进行部分代码分离

而对于 bundle.js，还能再通过 Code Splitting 进行优化。在 React 中，一个路由就是一个组件，因而从路由层面进行代码分离是一个很容易的切入点。这里，我们使用 webpack 的 bundle loader （Code Splitting的一种方式）和 组件来实现在 React 中的按需加载。

1. 首先，安装 bundle-loader

npm i --save bundle-loader

2. 实现 组件

import React, { Component } from 'react'

class Bundle extends Component {
  state = {
    // short for "module" but that's a keyword in js, so "mod"
    mod: null
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

export default Bundle

由上述的实现，我们可以看到整个加载的实现过程：

• webpack bundle loader 通过 load 参数的方式传递给 Bundle；
• 当 Bundle 加载完或者接收到新的 prop 的时候，就会调用 load，然后在回调函数中设置 Bundle 的状态值；
• 最后，渲染模块。

3. 结合 bundle-loader 和 实现按需加载

// 通过 `bundle-loader` 懒加载方式引入需要按需加载的模块
import loadSomething from 'bundle-loader?lazy!./Something'

// 范式

  {(mod) => (
    // do something with the module
  )}


// 例子：如果 module 是个 component
 
  {(Comp) => (Comp
    ? 
    : 
  )}

三、使用 bundle loader 相比于使用 import() 的优势

先来看看 import() 方式：

// 同步的 synchronous
import React from 'react';
import { tools } from '../js/util';

// 异步的 asynchronous
const AsyncModulePromise = import ('../js/lib/Module);

import() 已经进入了 stage 3，它接收动态模块名，返回的是一个 Promise，需要引入 Babel 插件：syntax-dynamic-import。

// a.js
const a = () => console.log("hello I'm a!");
export default a;

// b.js
const b = () => console.log("Hello I'm b!");
export default b;

// index.js
import a from './a';
a();  // hello I'm a!

const bPromise = import('./b');
bPromise.then(b => {
    b.default();  // hello I'm b!
})
.catch(e => console.error(e));

两者都是动态引入的方式，当渲染的时候才加载代码。import 动态加载部分实践的时候有报错，估计是配置问题，还待研究。。。具体可参考：ECMAScript 6 入门#import。

在 React 中，将 import() 的运用结合到了 组件中，这样做，有一个极大的优势：（附上原文，求大神解释：Another HUGE benefit of bundle loader is that the second time it calls back synchronously, which prevents flashing the loading screen every time you visit a code-split screen.）

4. 加载效果展示

在按需加载之前：

在按需加载之前

在按需加载之后：

在按需加载之后

可以看到，当使用 Code Splitting 之后，相应的模块只有在需要（如点击）的时候才会被加载。
ps：当然这个例子中，1.bundle.js 和 2.bundle.js 的体积相对于 bundle.js 几乎可以忽略不计（因为这个原因，我还特意增加了模块中的代码量，才使得两次 bundle.js 有了小数点的变化~/笑哭），但是，在大型项目中，按需加载确实是一个提升性能很好的优化点。

5. 参考

• webpack 中文指南#代码分离
• Code Splitting - React Router v4
• Neehar Venugopal - A Beginner's Guide to Code Splitting Your React App - React Conf 2017
• ECMAScript 6 入门#import
• 使用ES6 Module如何处理模块按需加载 (lazyload)？