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

为什么需要代码分片

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() 是 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>