react项目优化配置的方法
生活随笔
收集整理的這篇文章主要介紹了
react项目优化配置的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇內容介紹了“react項目優化配置的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
優化-配置CDN
通過 craco 來修改 webpack 配置，從而實現 CDN 優化
yarnadd@craco/craco //或者 npminstall@craco/craco--save
在項目根目錄新建craco.config.js文件
//添加自定義對于webpack的配置
constpath=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配置對象
//可以在這個函數中對它進行詳細的自定義配置
//只要最后return出去就行
letcdn={
js:[],
css:[]
}
//只有生產環境才配置
whenProd(()=>{
//key:需要不參與打包的具體的包
//value:cdn文件中掛載于全局的變量名稱為了替換之前在開發環境下
//通過import導入的react/react-dom
webpackConfig.externals={
react:'React',
'react-dom':'ReactDOM'
}
//配置現成的cdn資源數組現在是公共為了測試
//實際開發的時候用公司自己花錢買的cdn服務器
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資源數組時準備好的一些現成的資源
const{isFound,match}=getPlugin(
webpackConfig,
pluginByName('HtmlWebpackPlugin')
)
if(isFound){
//找到了HtmlWebpackPlugin的插件
match.userOptions.cdn=cdn
}
returnwebpackConfig
}
}
}
public/index.html
<body>
<divid="root"></div>
<!--加載第三發包的CDN鏈接-->
<%htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL=>{%>
<scriptsrc="<%=cdnURL%>"></script>
<%})%>
</body>
優化-路由懶加載
使用步驟
-
在 App 組件中，導入 Suspense 組件
-
在 路由Router 內部，使用 Suspense 組件包裹組件內容
-
為 Suspense 組件提供 fallback 屬性，指定 loading 占位內容
-
導入 lazy 函數，并修改為懶加載方式導入路由組件
代碼實現
App.js
import{Routes,Route}from'react-router-dom'
import{HistoryRouter,history}from'./utils/history'
import{AuthRoute}from'./components/AuthRoute'
//導入必要組件
import{lazy,Suspense}from'react'
//按需導入路由組件
constLogin=lazy(()=>import('./pages/Login'))
constLayout=lazy(()=>import('./pages/Layout'))
constHome=lazy(()=>import('./pages/Home'))
constArticle=lazy(()=>import('./pages/Article'))
constPublish=lazy(()=>import('./pages/Publish'))
functionApp(){
return(
<HistoryRouterhistory={history}>
<Suspense
fallback={
<div
style={{
textAlign:'center',
marginTop:200
}}
>
loading...
</div>
}
>
<Routes>
{/*需要鑒權的路由*/}
<Routepath="/"element={
<AuthRoute>
<Layout/>
</AuthRoute>
}>
{/*二級路由默認頁面*/}
<Routeindexelement={<Home/>}/>
<Routepath="article"element={<Article/>}/>
<Routepath="publish"element={<Publish/>}/>
</Route>
{/*不需要鑒權的路由*/}
<Routepath='/login'element={<Login/>}/>
</Routes>
</Suspense>
</HistoryRouter>
)
}
exportdefaultApp
總結
以上是生活随笔為你收集整理的react项目优化配置的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java自动装箱和拆箱_关于java自动
- 下一篇： ps修补工具在哪(PS修补工具使用方法)