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>
  );
}

优化后效果

参考文章

相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈