如何在react項目中做公共配置文件

更新時間：2023年10月20日 09:22:33 作者：尼古拉斯二嘎

這篇文章主要介紹了如何在react項目中做公共配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

在react項目中做公共配置文件

在我們的react項目中有public文件夾，這個地方存放都是靜態(tài)文件不會被編譯，所以我們的靜態(tài)公共配置文件就放在這里

公共配置文件放在這里有一個好處就是任何人可以實時修改配置文件，然后程序會根據(jù)你的修改運行對應(yīng)的邏輯或者變量，

如：

我們的開發(fā)人員做了這個配置文件功能，我們就可以告訴其他非研發(fā)同事在這里配置所需內(nèi)容，是不是很方便？

下面來看一下

1.在public中創(chuàng)建config.js

window.config = {
	baseUrl: 'xxxxx',
	mainTitle: 'xxxx',
	imgUrl: 'xxxx',
	...
}

2.在index.html中添加

注意這里的%PUBLIC_URL%是工程內(nèi)置的寫法，我們創(chuàng)建工程的時候在index.html可以看到很多這樣的寫法，意思就是路徑取public文件

而且我建議大家使用script引入，這樣每次刷新頁面的時候能保證獲取到我們修改config.js后的內(nèi)容，如果使用import的話，會在編譯的時候直接打包進去，導(dǎo)致打完包再修改配置文件就無效了

<script src = "%PUBLIC_URL%/config.js"></script>

3.在入口src -> index.js文件中

// 大家應(yīng)該很熟悉，就是將功能配置文件的內(nèi)容掛載到全局，這個跟vue的寫法大同小異
React.Component.prototype.$config = window.config

4.在組件中使用，比如我們在公共配置文件中添加了圖片地址，這樣用：

process.env.PUBLIC_URL

let imgUrl = this.$config.imgUrl
<img  src={`${process.env.PUBLIC_URL}/${imgUrl}`}></ img>

在上面我們看到了process.env，他是Nodejs提供的一個API，它返回一個包含用戶環(huán)境信息的對象。

如果我們給Nodejs

設(shè)置一個環(huán)境變量，并把它掛載在 process.env 返回的對象上，便可以在代碼中進行相應(yīng)的環(huán)境判斷

// 如我們有時會看到這樣的代碼，就是判斷當前是生產(chǎn)還是開發(fā)環(huán)境來決定mode字段的定義
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

react項目優(yōu)化配置

優(yōu)化-配置CDN

通過 craco 來修改 webpack 配置，從而實現(xiàn) CDN 優(yōu)化

 yarn add  @craco/craco
//或者
 npm install  @craco/craco --save

在項目根目錄新建craco.config.js文件

 
 
// 添加自定義對于webpack的配置
 
const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
 
module.exports = {
  // webpack 配置
  webpack: {
    // 配置別名
    alias: {
      // 約定：使用 @ 表示 src 文件所在路徑
      '@': path.resolve(__dirname, 'src')
    },
    // 配置webpack
    // 配置CDN
    configure: (webpackConfig) => {
      // webpackConfig自動注入的webpack配置對象
      // 可以在這個函數(shù)中對它進行詳細的自定義配置
      // 只要最后return出去就行
      let cdn = {
        js: [],
        css: []
      }
      // 只有生產(chǎn)環(huán)境才配置
      whenProd(() => {
        // key:需要不參與打包的具體的包
        // value: cdn文件中 掛載于全局的變量名稱 為了替換之前在開發(fā)環(huán)境下
        // 通過import 導(dǎo)入的 react / react-dom
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
        // 配置現(xiàn)成的cdn 資源數(shù)組 現(xiàn)在是公共為了測試
        // 實際開發(fā)的時候 用公司自己花錢買的cdn服務(wù)器
        cdn = {
          js: [
            'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
          ],
          css: []
        }
      })
 
      // 都是為了將來配置 htmlWebpackPlugin插件 將來在public/index.html注入
      // cdn資源數(shù)組時 準備好的一些現(xiàn)成的資源
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )
 
      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.userOptions.cdn = cdn
      }
 
      return webpackConfig
    }
  }
}

public/index.html

<body>
  <div id="root"></div>
  <!-- 加載第三發(fā)包的 CDN 鏈接 -->
  <% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL => { %>
    <script src="<%= cdnURL %>"></script>
  <% }) %>
</body>

優(yōu)化-路由懶加載

使用步驟

在 App 組件中，導(dǎo)入 Suspense 組件
在路由Router 內(nèi)部，使用 Suspense 組件包裹組件內(nèi)容
為 Suspense 組件提供 fallback 屬性，指定 loading 占位內(nèi)容
導(dǎo)入 lazy 函數(shù)，并修改為懶加載方式導(dǎo)入路由組件

代碼實現(xiàn)

App.js

import { Routes, Route } from 'react-router-dom'
import { HistoryRouter, history } from './utils/history'
import { AuthRoute } from './components/AuthRoute'
 
// 導(dǎo)入必要組件
import { lazy, Suspense } from 'react'
// 按需導(dǎo)入路由組件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
 
function App () {
  return (
    <HistoryRouter history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        <Routes>
          {/* 需要鑒權(quán)的路由 */}
          <Route path="/" element={
            <AuthRoute>
              <Layout />
            </AuthRoute>
          }>
            {/* 二級路由默認頁面 */}
            <Route index element={<Home />} />
            <Route path="article" element={<Article />} />
            <Route path="publish" element={<Publish />} />
          </Route>
          {/* 不需要鑒權(quán)的路由 */}
          <Route path='/login' element={<Login />} />
        </Routes>
      </Suspense>
    </HistoryRouter>
  )
}
 
export default App

查看效果

我們可以在打包之后，通過切換路由，監(jiān)控network面板資源的請求情況，驗證是否分隔成功