基於react16 webpack3 搭建前端spa基礎框架 react-router的4種異步加載方式

這兩天看了下react的文檔，準備搭建一套適用的基本react開發架子。

因爲我一直使用的是vue，不多使用過react進行項目的開發，所以此構建主要參考的是vue的項目經驗。

項目主要會涉及到的知識點

• webpack 配置及其優化

• react-router 升級爲4.0以後的使用 react-router-dom react-router-config

• react-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 中 拆分爲

1. react-router 核心功能
2. react-router-dom 針對於瀏覽器的路由
3. 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

參考地址：github.com/ReactTraini…

www.npmjs.com/package/rea…

具體到項目配置以下：

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…

reactjs.org/blog/2017/0…

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…

reactjs.org/blog/2017/0…

babeljs.io/docs/usage/…

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種異步加載方式