登录
项目使用 Vite 进行的初始化。
版本说明:
- vite: ^5.2.0
- react: ^18.2.0
- react-router-dom: ^6.23.0
前端使用react、vue进行spa单页面开发时,由于普通单页面项目的特性,网站会在初次加载时,把网站所有需要用的的页面资源全部加载完成后,才能展示页面,这就导致网站初次打开时的白屏时间过长(大一些的网站可能三五秒),影响用户体验。
React和vue都有提供页面懒加载、组件懒加载的功能,这里记录一下React的路由懒加载功能。
我的项目的main.tsx是初始入口,路由配置写在App.tsx中。
下面是main.tsx的代码,后续的记录中,main.tsx中的内容不会发生变化:
import ReactDOM from 'react-dom/client'
import '@/assets/css/index.css'
import App from '@/App.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<App />
)
下面会修改App.tsx,来分别实现不同功能的路由。
下面是最基本、最常规,没有实现路由懒加载的写法。
效果:首次加载网站会加载所有页面资源,项目大或网速差时,会导致白屏时间过长,优点就是再切换页面时,能立刻切换过去。
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Home from '@/pages/Home'
import IconList from '@/pages/Other/IconList'
function App() {
return (
<div className='min-h-screen'>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/other/iconList" element={<IconList />} />
<Route path="/*" element={<Navigate to="/" />}></Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default App
下面是React官方推荐的路由懒加载的写法。
效果:如果打开的页面没有打开过,会先展示Suspense标签中传入的fallback字段的组件样式,直到对应页面的页面资源加载完成;如果要进入的页面,是刚刚打开过且没有刷新过网站的,那就不需要再次加载,可以立刻切换进入。
优点是实现了懒加载,缺点就是,新页面资源加载完成之前,会展示fallback传入的组件,如果不传,那就会是彻底的空白页面,个人不喜欢这种,比如切换内容时,页面展示一个全局的大loading,半秒后才切换到新页面,觉着操作有种断裂感。
Suspense可以用来比较好的支持懒加载组件
import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
const Home = React.lazy(() => import('@/pages/Home'))
const IconList = React.lazy(() => import('@/pages/Other/IconList'))
function App() {
return (
<div className='min-h-screen'>
<Suspense fallback={<div>加载中...</div>}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/other/iconList" element={<IconList />} />
<Route path="/*" element={<Navigate to="/" />}></Route>
</Routes>
</BrowserRouter>
</Suspense>
</div>
)
}
export default App
都知道react项目用来管理路由的是:React Router,它具体对应的库是主要是 react-router-dom,上面的两个章节也是使用的这个库。
这个章节会使用 react-router-dom 提供的功能来实现路由懒加载,优点就是能在页面切换时,效果和普通静态网站一样——点击后页面先卡着,静默去加载新页面的资源,加载完成后立刻展示。
下面是使用 react-router-dom 的功能实现的路由懒加载效果。
写法会比较怪,可以说是类似vue的路由配置的写法,这是为了使用 react-router-dom 的 Data Apis 的 lazy 方法,只有它支持路由懒加载。
不过它支持懒加载路由,无法用来懒加载组件。
不过为了体量开发者的原先那种标签式的写法习惯,Data Apis也可以支持原先的写法,下一个章节我会提供一下写法。
import { Navigate, createBrowserRouter, RouterProvider } from "react-router-dom";
function App() {
// Data Apis
let router = createBrowserRouter([
{
path: "/",
lazy: async () => ({
Component: (await import('@/pages/Home')).default,
}),
},
{
path: "/other/iconList",
lazy: async () => ({
Component: (await import('@/pages/Other/IconList')).default,
}),
},
{
// 缺省路由重定向
path: "/*",
element: <Navigate to ="/" />,
},
])
return (
<div className="min-h-screen">
<RouterProvider router={router} />
</div>
)
}
export default App
下面的主要是旧习惯的写法,但可以支持使用 react-router-dom 的 createRoutesFromElements 方法转为 Data Apis。
import { Navigate, createBrowserRouter, Route, RouterProvider, createRoutesFromElements } from "react-router-dom";
function App() {
// Data Apis
let router = createBrowserRouter(createRoutesFromElements(
<Route>
<Route path="/" lazy={async () => ({Component: (await import('@/pages/Home')).default})}></Route>
<Route path="/other/iconList" lazy={async () => ({Component: (await import('@/pages/Other/IconList')).default})}></Route>
<Route path="/*" element={<Navigate to ="/" />}></Route>
</Route>
))
return (
<div className="min-h-screen">
<RouterProvider router={router} />
</div>
)
}
export default App
React的Suspense,可以用来懒加载路由和组件,缺点就是,加载新页面、组件期间,原位置要么空白,要么提供一个占位组件,对此不喜欢的,可以使用另一种方案。
React Router的 Data Apis 的 lazy 方法,可以再新页面资源加载起源,仍旧展示旧页面,但只支持路由懒加载。
个人认为,页面懒加载使用后者,组件懒加载可以使用前者。