• 售前

  • 售后

热门帖子
入门百科

react如何用懒加载淘汰首屏加载时间

[复制链接]
Lieutenant555 显示全部楼层 发表于 2021-10-26 12:27:33 |阅读模式 打印 上一主题 下一主题
目次


  • 利用

    • 安装
    • 如何在路由中利用?

  • 加载速度对比
最近在写一个react-ant-admin的集成框架用于快速搭载中配景项目。此中遇到很多题目,最紧张的应该是访问速度了。我就想 react 可不可以和 vue 一样用路由懒加载来镌汰首页渲染所花费的时间。
于是找到了一个很好用的轮子:
  1. @loadable/component
复制代码

利用



安装
  1. npm install @loadable/component -D
  2. # or use yarn
  3. yarn add @loadable/component -D
复制代码
如何在路由中利用?


在src/router/index.js文件中按照如下举例来写:
  1. import React from "react";
  2. import { Route, Switch } from "react-router-dom";
  3. import routerList from "./routes";
  4. const router = () => {
  5.   return (
  6.     <Switch>
  7.       {routerList.map((item) => {
  8.         const { component: Component, key, path, ...itemProps } = item;
  9.         return (
  10.           <Route
  11.             exact={true}
  12.             key={key}
  13.             path={path}
  14.             render={(allProps) => <Component {...allProps} {...itemProps} />}
  15.           />
  16.         );
  17.       })}
  18.     </Switch>
  19.   );
  20. };
  21. export default router;
复制代码
  1. src/router/routes.js
复制代码
文件按照如下举例来写:
  1. import loadable from "@loadable/component";
  2. const Error404 = loadable(() => import("@/pages/err/404")); // 对应文件 src/pages/err/404.js
  3. const Home = loadable(() => import("@/pages/home"));
  4. const Demo = loadable(() => import("@/pages/demo"));
  5. const routerList = [
  6.   {
  7.     path: "/",
  8.     key: "home",
  9.     components: Home,
  10.   },
  11.   {
  12.     path: "/demo",
  13.     key: "demo",
  14.     components: Demo,
  15.   },
  16.   {
  17.     path: "*",
  18.     key: "404",
  19.     components: Error404,
  20.   },
  21. ];
  22. export default routerList;
复制代码
  1. src/App.js
复制代码
文件按照如下举例来写:
  1. import React from "react";
  2. import { BrowserRouter as Router } from "react-router-dom";
  3. import Routes from "./router";
  4. export default function App() {
  5.   return (
  6.     <Router>
  7.       <Routes />
  8.     </Router>
  9.   );
  10. }
复制代码
此时可以去页面查看切换路由的时间是否动态加载了 js 文件。若切换路由加载了 js 文件,分析懒加载路由成功!

加载速度对比


在没有利用
  1. @loadable/component
复制代码
之前
服务器带宽1M,gzip压缩,文件大小2MB左右,服务器请求加载时间4.3s左右


利用路由懒加载
服务器带宽1M,gzip压缩,文件大小1MB左右,服务器请求加载时间1s左右

以上就是react如何利用懒加载镌汰首屏加载时间的详细内容,更多关于react懒加载镌汰加载时间的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作