脚本宝典收集整理的这篇文章主要介绍了react如何用懒加载减少首屏加载时间,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题,最重要的应该是访问速度了。我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲染所花费的时间。@H_126_19@
于是找到了一个很好用的轮子:@loadable/component
npm install @loadable/component -D # or use yarn yarn add @loadable/component -D
在src/router/index.js文件中按照如下举例来写:
import React From "react"; import { Route, SwITch } from "react-router-dom"; import routerList from "./routes"; const router = () => { return ( <Switch> {routerList.map((item) => { const { component: Component, key, path, ...itemPRops } = item; return ( <Route exact={true} key={key} path={path} render={(allProps) => <Component {...allProps} {...itemProps} />} /> ); })} </Switch> ); }; export default router;
在src/router/routes.js
文件按照如下举例来写:
import loadable from "@loadable/component"; const Error404 = loadable(() => import("@/pages/err/404")); // 对应文件 src/pages/err/404.js const Home = loadable(() => import("@/pages/home")); const Demo = loadable(() => import("@/pages/demo")); const routerList = [ { path: "/", key: "home", components: Home, }, { path: "/demo", key: "demo", components: Demo, }, { path: "*", key: "404", components: Error404, }, ]; export default routerList;
在src/App.js
文件按照如下举例来写:
import React from "react"; import { browserRouter as Router } from "react-router-dom"; import Routes from "./router"; export default function App() { return ( <Router> <Routes /> </Router> ); }
此时可以去页面查看切换路由的时候是否动态加载了 js 文件。若切换路由加载了 js 文件,说明懒加载路由成功!
在没有使用@loadable/component
之前
服务器带宽1M,gzip压缩,文件大小2MB左右,服务器请求加载时间4.3s左右
使用路由懒加载
服务器带宽1M,gzip压缩,文件大小1MB左右,服务器请求加载时间1s左右
以上就是react如何利用懒加载减少首屏加载时间的详细内容,更多关于react懒加载减少加载时间的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的react如何用懒加载减少首屏加载时间全部内容,希望文章能够帮你解决react如何用懒加载减少首屏加载时间所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。