為什么要做dynamic import？
dynamic import不知道為什么有很多叫法，什么按需加載，懶加載，Code Splitting，代碼分頁等。
總之，就是在SPA，把JS代碼分成N個頁面份數的文件，不在用戶剛進來就全部引入，而是等用戶跳轉路由的時候，再加載對應的JS文件。
這樣做的好處就是加速首屏顯示速度，同時也減少了資源的浪費。
為什么選擇 webpack 3?
- 更高的性能
- 有scope hosting功能，不再需要rollup來處理代碼冗余
- 可與react-router結合，更優雅的做dynamic import
- 最重要的一點是，我正經學webpack的時候3已結出了- -
完整的 react spa 項目地址
GitHub項目地址
這個一個完整的項目，這節相關的內容可在router/routerMap.jsx中找到。
第一步：安裝 babel-plugin-syntax-dynamic-import
babel用的是babel-env，使用方法可以去babel官方學習，實踐可看我項目的源代碼。
npm i -D babel-plugin-syntax-dynamic-import 以后， 在.babelrc文件的plungins中加上"syntax-dynamic-import"。
第二步：安裝 react-loadable
npm i -S react-loadable 以后，我們就能愉快得做dynamic import了。
第三步： 編輯routerMap
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();import App from 'containers';// 按路由拆分代碼
import Loadable from 'react-loadable';
const MyLoadingComponent = ({ isLoading, error }) => {// Handle the loading stateif (isLoading) {return <div>Loading...</div>;}// Handle the error stateelse if (error) {return <div>Sorry, there was a problem loading the page.</div>;}else {return null;}
};
const AsyncHome = Loadable({loader: () => import('../containers/Home'),loading: MyLoadingComponent
});
const AsyncCity = Loadable({loader: () => import('../containers/City'),loading: MyLoadingComponent
});
const AsyncDetail = Loadable({loader: () => import('../containers/Detail'),loading: MyLoadingComponent
});
const AsyncSearch = Loadable({loader: () => import('../containers/Search'),loading: MyLoadingComponent
});
const AsyncUser = Loadable({loader: () => import('../containers/User'),loading: MyLoadingComponent
});
const AsyncNotFound = Loadable({loader: () => import('../containers/404'),loading: MyLoadingComponent
});// 路由配置
class RouteMap extends React.Component {render() {return (<Router history={history}><App><Switch><Route path="/" exact component={AsyncHome} /><Route path="/city" component={AsyncCity} /><Route path="/search/:category/:keywords?" component={AsyncSearch} /><Route path="/detail/:id" component={AsyncDetail} /><Route path="/user" component={AsyncUser} /><Route path="/empty" component={null} key="empty" /><Route component={AsyncNotFound} /></Switch></App></Router>);// 說明// empty Route// https://github.com/ReactTraining/react-router/issues/1982 解決人：PFight// 解決react-router v4改變查詢參數并不會刷新或者說重載組件的問題 }
}export default RouteMap;大功告成
我們可以運行webpack，然后就能看到效果（圖僅為dev環境，build才會再打包一個vendor.js，為什么要有vendor.js，請見devDependencies和dependencies的區別 >>）
參考文章
Code Splitting in Create React App
Q&A
有同學表示，我的方法做頁面分離并沒有什么好處，因為每個頁面都依賴了三方庫的代碼，所以其實頁面有很多冗余代碼，能想到這點很棒，已經開始有架構思維了。不過，注意這個想法在dev環境下，這個同學是對的。
那到了build環境，或者說到了發布環境，又是怎么樣的呢？的確，這篇文章我沒有提到，請見我的另一篇文章devDependencies和dependencies的區別。這篇文章主要解釋了npm的package.json中devDependencies和dependencies區別是什么。
看完以后，我們就可以知道，為什么我之前說“注意這個想法在dev環境下，這個同學是對的”了。因為，我們npm run build以后，webpack會把三方包打包到vendor.js文件，頁面邏輯代碼不會牽涉其中，每個頁面都會引用vendor.js這個文件，這樣的話，就不會出現重復引入冗余代碼的情況了。
