背景
之前個人博客搭建時，發現頁面加載要5s才能完成并顯示
問題
React生成的JS有1.4M，對于個人博客服務器的帶寬來說，壓力較大，因此耗費了5S的時間
優化思路
解決React生成的JS大小，因為我用的是react-router-dom路由模塊，查閱資料發現可以利用懶加載的機制，實現JS分割成不同的JS文件
利用React.lazy進行懶加載，在頁面尚未加載完畢的時候，需要配置Suspense
Suspense的作用是當React.lazy懶加載完成時，就回調真正的頁面實現展示
實現代碼
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 邀請需要返回一個函數
export default function Main() {return (<Suspense fallback={<Loading />}><App /></Suspense>);
}
優化后效果
參考文章
- 博客原文
)
