這兩天看了下react的文件，準備搭建一套適用的基本react開發架子。
由於我一直使用的是vue，很少使用過react進行專案的開發，因此此構建主要參考的是vue的專案經驗。
專案主要會涉及到的知識點
webpack配置及其優化react-router升級為4.0之後的使用react-router-domreact-router-configreact-router非同步4種非同步載入配置
專案github原始碼:github.com/wangweiange…
react和vue的開發模式很像，同樣的元件化，模組化，統一狀態管理機制，路由 ... 等等，因此我覺得作為一位使用的開發者，我們僅僅需要了解各自的api,各自的大致實現原理就可以開始上手擼程式碼了。
技術棧的相互切換沒有太大的成本，上手開發都比較簡單，因為有太多的一致性。
一 ：webpack的優化配置前面一篇文章中我有詳細的介紹
請參考：blog.seosiwei.com/detail/9
webpack在vue和react裡面的配置幾乎是一致的，唯一的不同就是loader的配置，這裡就不做詳細的介紹。
二：react-router4
react-router4版本 相對於v2 , v3有非常大的區別，可以說是完全重構的感覺。
react-router4 中 拆分為
react-router核心功能react-router-dom針對於瀏覽器的路由react-reouter-native針對於native端的路由
在此基礎上我們可能還需要：react-router-redux , react-router-config等外掛。
在router4以前，我們是使用getComponent的的方式來實現按需載入的，router4中，getComponent方法已經被移除。
看了一下網上的文章，基本都介紹的不是很全面，因此在此總結一下，並給出實際的原始碼供大家參考。
在這裡主要介紹 v4版本按需載入的配置。
（1）Code Splitting使用 react-loadable , babel-plugin-syntax-dynamic-import
具體到專案配置如下：
1.安裝依賴
//安裝依賴
npm install react-loadable --save-dev
npm install babel-plugin-syntax-dynamic-import --save-dev複製程式碼2.webpack 解析import()配置：
3.router路由配置
（2）bundle-loader 按需載入方式，官方文件案例
參考地址：www.npmjs.com/package/bun…
reacttraining.com/react-route…
1.安裝依賴
//安裝依賴
npm install bundle-loader --save-dev複製程式碼2.新增Bundle元件 ./src/components 下新增 Bundle.jsx 元件，內容如下：
3.router路由配置
(3) 改變2的方案 import按需載入
參考連結：www.jianshu.com/p/547aa7b92…
1.安裝依賴
npm install babel-plugin-syntax-dynamic-import --save-dev複製程式碼2.webpack 解析import()配置：
3.新建BundleImport 元件 ./src/components 下新增 BundleImport.jsx 元件，內容如下：
4.router 路由配置
（4）Create an Async Componen 建立一個Async元件方式非同步載入
參考連結：serverless-stack.com/chapters/co…
1.由於需要支援 async,await的語法，因此我們安裝一下babel-polyfill
npm install babel-polyfill --save-dev
npm install babel-plugin-syntax-dynamic-import --save-dev複製程式碼2.webpack入口配置 babel-polyfill , babel-loader 配置 syntax-dynamic-import plugin
3.新增AsyncComponent元件 ./src/components 下新增AsyncComponent.jsx 元件，內容如下：
4.router路由配置
總結：react-router 按需載入的方式有很多種，大家各自選擇合適於自己的即可。所有的按需載入原始碼皆在 ./src/app.jsx 檔案中。
關於react-router-config 的配置補充請看下面一篇文章
react-router4基於react-router-config的路由拆分與按需載入
關注我的部落格：zane的個人部落格
原文地址：基於react16 webpack3 搭建前端spa基礎框架 react-router的4種非同步載入方式