論與Vue近似等價的React專案架構與配置（React專案優化更多/附帶模板）
技術標籤：Webreactjsvuewebpackreact-app
前言
之前在 Vue 建立新專案（使用 vue-cli 4 腳手架）後，介紹過更多的優化方案：
假設不做以上大量的優化，使用 vue-cli 預設的配置進行 build 部署上線也不會有很大的問題（很多中小網站都沒有做過任何優化，現在網速都很快即使單 chunk 很大也無所謂）。
如何在 react 中完整復現達到優化一致是最大的問題。
優化方向
基於以上三篇文章在 Vue 專案中的優化可以整理如下優化方向：
| 方向 | 解決 | 說明 |
|---|---|---|
.browserslistrc | 原生自帶 | react 專案建立後在 package.json 內配置即可 |
babel.config.js | cra | cra 侵入修改 babel 配置 |
jsconfig.json | 建立檔案 | 建立該檔案即可使用 |
.editorconfig | 建立檔案 | 建立該檔案即可使用 |
postcss.config.js | 原生自帶 | react 專案自帶 autoprefix 無需配置 |
.eslintignore | 建立檔案 | 建立該檔案即可使用 |
.eslintrc.js | 建立檔案 | 建立該檔案即可使用 |
vue.config.js | cra | 使用 cra 複寫對 react 專案配置 |
.env.development | 原生支援 | 建立該檔案即可使用 |
.env.production | 原生支援 | 建立該檔案即可使用 |
svg | 新 svg 元件 | 復現 svg 複用元件解決 |
從以上整理我們發現需要解決的有三個問題：
-
cra 複寫配置解決 babel 和專案配置問題
-
復現 Vue 中的 svg 元件對 svg 全域性複用
-
建立一些新的配置檔案（比如
.eslintrc.js，jsconfig.json等 ）
cra 配置複寫
對於第一個 cra 配置複寫，使用方法可參見：
《 react 不使用 eject 的配置方法（ config-overrides 復現 vue 專案全部配置）》
svg 複用
對於第二個 svg 問題，我們近似復現了 svg 元件，可參見：
《 react 復現 vue 中 svg-sprite-loader 的使用 svg 方法》
建立新檔案
建立新檔案進行配置並非易事，又引發了三類新問題。
一、直接建立就可以使用的
如 jsconfig.json 、.editorconfig 、.eslintignore 、.env.development 、.env.production 。
二、需要額外整合的
在 react 中是沒有配置 prettier 的，有關 prettier 有多重要是人人皆知的，其重要性可參見此文：
《 Vue3 中 eslint 程式碼格式化 prettier 和 standard 規則比較（為什麼推薦使用 prettier ）》
所以如何從零整合 prettier 並保持與 eslint 不起衝突是需要額外注意的問題（在 Vue 專案中如果建立時選擇了 prettier ，其解決衝突方案會預設配置好），有關從零配置 prettier 可參見此文：
《 JavaScript 新專案從零開始整合 eslint + prettier 方法（程式碼風格最佳搭配）》
三、在範圍受限的
在 vue-cli 4 中建立的專案，其 script 快速啟動命令是支援任意 env 支援的，什麼是任意 env 支援，就是當你使用如下 script 命令時：
yarn build --mode modeName
那麼他會自動讀取專案根目錄下 .env.modeName 檔案內的環境變數配置，也就是支援我們配置無數個環境。
但是在 react 中只支援 .env / .env.local / .env.development / .env.production / .env.test ，如果想額外新增環境，請使用不同的命令列注入環境變數或使用 cross-env 啟動專案同時相容多平臺。
優化一覽
由於 cra 部分十分細緻，配置原理大致相同（在上面文章內已經有詳細介紹），這裡只給出已優化的配置一覽：
| 優化 | 策略 | 說明 |
|---|---|---|
打包至 dist 下 | cra | 將原來預設打包至 build 下改為常用 dist 位置 |
| 生產環境開啟代理伺服器 | cra | 生產環境支援代理跨域 |
| webpack-dev-server 配置支援輸出檢視 | cra | 明確掌控 devServer 部分配置 |
路徑支援使用 @ / @c 等別名 | cra | 更快捷的匯入目標 |
@ 等別名路徑支援程式碼提示 | jsconfig | 使用別名路徑支援路徑只能識別提示 |
| 支援 less | cra + less | 支援使用 less 樣式檔案 |
| 支援 sass | sass | 支援使用 sass 樣式檔案 |
| 支援 less 全域性樣式資源 | cra + less | 支援匯入全域性 less 樣式資源實現變數和函式隨處使用 |
| svg 元件 | cra + svg-sprite-loader | svg 只需載入一次隨處複用，支援外部 svg |
| css-in-js | cra + @emotion | 支援 css props / css props object / styled-components 各種 css-in-js 方案 |
| 生產環境 module 快速匯入 | cra + dynamic-import-node | 藉助現代瀏覽器支援 module 載入的能力快速切換匯入的模組 |
| 生產環境去除 devtools | cra | 減小打包體積 |
打包後去除 .chunk 部分檔名 | cra | 去除打包後 chunk 自帶的 .chunk 無意義的檔名 |
生產環境去除 console.log | cra | 縮小程式碼體積，改進使用者體驗 |
| 打包去除內聯註釋 | cra | 構建後去除原始碼中的 banner 等註釋內容 |
自動注入 index.html 的預設標題 | cra | 動態自動注入打包後的 index.html 內的 title 預設標題 |
| 支援手動 splitChunk 分包與命名 | cra | 手動配置 splitChunk 分包策略，極大提升載入速度 |
| runtime 內聯策略 | cra + script-ext-html-webpack-plugin | 支援抽取 runtime 並內聯至 index.html 且不額外生成多餘的 runtime 檔案 |
| webpack 配置支援輸出檢視 | cra | 明確掌控 webpack 配置 |
注：css module 在 create-react-app 建立的專案中原生支援（使用 name.module.[css|less|scss] 的命名規則即可）
總結
除此之外，一個專案的健壯性仍有待改善，比如：
-
支援全域性 script / link 資源的插入配置
-
支援各頁面不同的標題配置
-
支援非同步業務
-
支援全域性狀態管理
-
axios 請求庫封裝
-
react 路由（預設建立的新專案無路由配置）
-
懶載入策略
-
初始樣式 reset
彙總以上一切得到一個真正可以使用的 “初始專案” 模板：fz6m / react-awesome-template
注：需要 Typescript 的請自行整合，一般團隊不大的情況是不需要強加 ts 浪費時間的。