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基礎才能看懂我在說什麼。
還有一個項目的結構沒有說。這個東西，看本身的項目怎麼樣吧，沒有固定的。