背景
之前個人博客搭建時，發(fā)現(xiàn)頁面加載要5s才能完成并顯示
問題
React生成的JS有1.4M，對于個人博客服務器的帶寬來說，壓力較大，因此耗費了5S的時間
優(yōu)化思路
解決React生成的JS大小，因為我用的是react-router-dom路由模塊，查閱資料發(fā)現(xiàn)可以利用懶加載的機制，實現(xiàn)JS分割成不同的JS文件
利用React.lazy進行懶加載，在頁面尚未加載完畢的時候，需要配置Suspense
Suspense的作用是當React.lazy懶加載完成時，就回調(diào)真正的頁面實現(xiàn)展示文章來源：http://www.zghlxwxcb.cn/news/detail-651701.html
實現(xiàn)代碼
import React, {Suspense } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import { Loading } from '../components/common'
import Home from '../components'
import Download from '../components/download/'
import Login from '../components/login'
import Prize from '../components/prize'
import News from '../components/news'
import NewsDetail from '../components/news/detail'
import Support from '../components/support'
import Me from '../components/me'
import Pay from '../components/pay'
const App = () => (
// 使用 BrowserRouter 的 basename 確保在服務器上也可以運行 basename 為服務器上面文件的路徑
<BrowserRouter basename='/'>
<Route path='/' exact component={Home} />
<Route path='/download' exact component={Download} />
<Route path='/prize' exact component={Prize} />
<Route path='/news' exact component={News} />
<Route path='/news/detail' exact component={NewsDetail} />
<Route path='/support' exact component={Support} />
<Route path='/me' component={Me} />
<Route path='/pay' component={Pay} />
<Login />
</BrowserRouter>
)
// 因為使用了多語言配置，react-i18next 邀請需要返回一個函數(shù)
export default function Main() {
return (
<Suspense fallback={<Loading />}>
<App />
</Suspense>
);
}
優(yōu)化后效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-651701.html
參考文章
- 博客原文
到了這里，關于React構建的JS優(yōu)化思路的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
