為什么要做dynamic import？

dynamic import不知道為什么有很多叫法，什么按需加載，懶加載，Code Splitting，代碼分頁等。
總之，就是在SPA，把JS代碼分成N個頁面份數(shù)的文件，不在用戶剛進來就全部引入，而是等用戶跳轉路由的時候，再加載對應的JS文件。
這樣做的好處就是加速首屏顯示速度，同時也減少了資源的浪費。

為什么選擇 webpack 3?

• 更高的性能
• 有scope hosting功能，不再需要rollup來處理代碼冗余
• 可與react-router結合，更優(yōu)雅的做dynamic import
• 最重要的一點是，我正經學webpack的時候3已結出了- -

完整的 react spa 項目地址

GitHub項目地址

這個一個完整的項目，這節(jié)相關的內容可在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改變查詢參數(shù)并不會刷新或者說重載組件的問題 } }export default RouteMap;

大功告成

我們可以運行webpack，然后就能看到效果（圖僅為dev環(huán)境，build才會再打包一個vendor.js，為什么要有vendor.js，請見devDependencies和dependencies的區(qū)別 >>）

參考文章

Code Splitting in Create React App

Q&A

有同學表示，我的方法做頁面分離并沒有什么好處，因為每個頁面都依賴了三方庫的代碼，所以其實頁面有很多冗余代碼，能想到這點很棒，已經開始有架構思維了。不過，注意這個想法在dev環(huán)境下，這個同學是對的。

那到了build環(huán)境，或者說到了發(fā)布環(huán)境，又是怎么樣的呢？的確，這篇文章我沒有提到，請見我的另一篇文章devDependencies和dependencies的區(qū)別。這篇文章主要解釋了npm的package.json中devDependencies和dependencies區(qū)別是什么。

看完以后，我們就可以知道，為什么我之前說“注意這個想法在dev環(huán)境下，這個同學是對的”了。因為，我們npm run build以后，webpack會把三方包打包到vendor.js文件，頁面邏輯代碼不會牽涉其中，每個頁面都會引用vendor.js這個文件，這樣的話，就不會出現(xiàn)重復引入冗余代碼的情況了。

總結

以上是生活随笔為你收集整理的webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。