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

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

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

1.webpack 配置 ：

还有一个东西公共提取：

new webpack.optimize.CommonsChunkPlugin('common.js'),
插件的使用，就不多说了。自己去看webapck官网教程。

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

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

这个就实现了文件切片。

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

按需加载就是按照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不是一样的，注意一下。

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