React构建的JS优化思路

背景

之前个人博客搭建时,发现页面加载要5s才能完成并显示

问题

React生成的JS有1.4M,对于个人博客服务器的带宽来说,压力较大,因此耗费了5S的时间

优化思路

解决React生成的JS大小,因为我用的是react-router-dom路由模块,查阅资料发现可以利用懒加载的机制,实现JS分割成不同的JS文件

利用React.lazy进行懒加载,在页面尚未加载完毕的时候,需要配置Suspense

Suspense的作用是当React.lazy懒加载完成时,就回调真正的页面实现展示

实现代码

javascript 复制代码
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>
  );
}

优化后效果

参考文章

相关推荐
石金龙16 分钟前
[译] Composition in CSS
前端·css
白水清风19 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix31 分钟前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780031 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端31 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧31 分钟前
Promise 的使用
前端·javascript
NBtab1 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins