react按需加载

以前在博客园记录过react代码分块的实现，不过当时主要是关注“能实现”，没有深入研究。今天复习顺便深入一下。

/***引子开始***/

初学者在学习react或用react开发小项目时，一般不需要考虑到代码分块，往往在打包的项目中就已经包含全部的state和reducers。

至今很多团队开发项目都是用传统的文件组织形式：

component(或container)文件夹：存放视图组件或容器组件

action文件夹：存放各个组件的action

reducer文件夹：存放各个组件的reducer

最初接触react的时候我也是这样，毕竟redux文档的例子也是这么做的。后来读到程墨的《九浅一深react和redux》，他介绍了另一种组织形式，一个需要异步引入的react redux模块保存在以模块命名的文件夹中，自包含action、actionCreator、reducer和视图、容器组件，并以inex.js作为组件对外的export接口，在app中只需要引用'./ComponentName'就能获取组件的容器组件和reducer等。

这种react redux modules的组织形式是开发大型项目（或可预见项目以后会越滚越大）时既科学又自然的选择。

但我们提到react的代码分块的时候，其实有两种情况：

异步加载组件：首次加载app时就加载全部的reducer并生成完整的store state，这时候只需要对视图组件(或容器组件)进行分块，以后异步引用即可，操作上比较简单。

异步加载redux模块：将用户不一定需要的redux modules 进行分块，因此首次加载时只加载部分reducer并生成不完整的state，当用户路由到某个模块时，异步加载该模块，加载后更新reducers和state并显示视图组件。

/***引子结束***/

1.代码分块的基石：

现在用webpack打包项目是主流，webpack中有个特定的语法require.ensure()可以在打包时识别某些代码需要分块，这个功能独立于前端框架。react官方手脚架create-react-app一开始就支持webpack这个特性。现在&#x