一、明确概念
◆ 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的基础配置：
而对于 bundle.js，还能再通过 Code Splitting 进行优化。在 React 中，一个路由就是一个组件，因而从路由层面进行代码分离是一个很容易的切入点。这里，我们使用 webpack 的 bundle loader （Code Splitting的一种方式）和 <Bundle> 组件来实现在 React 中的按需加载。
1. 首先，安装 bundle-loader
npm i --save bundle-loader
2. 实现 <Bundle> 组件
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> 实现按需加载
// 通过 `bundle-loader` 懒加载方式引入需要按需加载的模块
import loadSomething from 'bundle-loader?lazy!./Something'
// 范式
<Bundle load={loadSomething}>
{(mod) => (
// do something with the module
)}
</Bundle>
// 例子：如果 module 是个 component
<Bundle load={loadSomething}>
{(Comp) => (Comp
? <Comp/>
: <Loading/>
)}
</Bundle>
三、使用 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() 的运用结合到了 <Bundle> 组件中，这样做，有一个极大的优势：（附上原文，求大神解释：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有了小数点的变化~/笑哭），但是，在大型项目中，按需加载确实是一个提升性能很好的优化点。
