react-router配合webpack实现按需加载

好久没有写博客了。一直感受没有什么要写的，可是这个东西确实有必要的。使用react开发，不可能一直打包到一个文件。小项目确定没有问题，可是变大一旦到几兆，这个问题就很严重。如今又Commonjs，AMD 规范实现了按需加载。这个就不说了。

说了这么多意思就是大型项目，不可能打包到一个文件中，须要按需求加载咱们须要的。按需加载的步骤：一、文件切片。二、按需加载。基本思路就是这个。

1.webpack 配置 ：

还有一个东西公共提取：

new webpack.optimize.CommonsChunkPlugin('common.js'),
插件的使用，就很少说了。本身去看webapck官网教程。

说明一下：entry：就是你的入口页面。

output：这个东西输出的东西，有必要说一下就是publicPath：这个东西就是咱们的服务器端的目录结构，会按这个目录加载js，css，那些东西。path：就是打包到本地的地址。

这个就实现了文件切片。

二、这个剩下的就是按需加载的部分了。

按需加载就是按照url地址进行加载咱们的须要的静态资源。

url的跳转就是靠的是react-router这个东西，进行咱们的组件的加载。react-router你须要本身去看，不看的话确定作不出来。这个只是个配置，具体的细节本身看。

入口叶、页配置的话这么玩：

这个是个人测试demo丑陋，可是注意这个入口处的路由配置，而后把这个东西reactDOM一下。

render(

<Router history={hashHistory} routes={rootRoute} />

, document.getElementById('main-holder'));

接下来就是代码（组件）按需加载了，这个就是：path对应的路径，加载这个组件。

　module.exports = {

    path: '/operation-management/tweets-ctrl',
    getComponent(nextState, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/tweets_ctrl.js'));
        });
    }
};

module.exports这个东西有必要说明一下。这个输出规范是node使用的。export default module 这个是es6使用，模块加载和输出规范。官方文档上说的 webpack don't support that。可是网上说使用require（）.default能够加载es6输出，
可是我没有试过。能够本身试试。
这个组件加载跟入口的写的对象的key不是同样的，注意一下。

三、代码的切片和按需加载基本就实现了。按需加载那个东西webapck会帮咱们本身写好。这个东西仍是要说明一下。
四、index.html里面的引用，提取的公共东西须要在打包的文件以前。js引用要注意。出现什么未定义估计是这个缘由。
这个写的比较简陋，说个步骤好了。细节的东西 ,原本就是要本身去整。希望会有用吧。须要有react基础才能看懂我在说什么。
还有一个项目的结构没有说。这个东西，看本身的项目怎么样吧，没有固定的。