最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目。其中遇到很多问题,最重要的应该是访问速度了。我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲染所花费的时间。

于是找到了一个很好用的轮子:@loadable/component

使用

  • 安装
npm install @loadable/component -D
# or use yarn
yarn add @loadable/component -D
  • 如何在路由中使用?
  1. 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;
  1. 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;
  1. 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>
);
}
  1. 此时可以去页面查看切换路由的时候是否动态加载了 js 文件。若切换路由加载了 js 文件,说明懒加载路由成功!

加载速度对比

在没有使用@loadable/component之前

服务器带宽1M,gzip压缩,文件大小2MB左右,服务器请求加载时间4.3s左右

使用路由懒加载

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

react懒加载,减少首屏加载时间的更多相关文章

  1. webpack分包:vue单页面解决分包【减少首屏加载时间】--按需加载[路由懒加载]

    1.使用webpack中的syntax-dynamic-import 插件 npm install --save-dev babel-plugin-syntax-dynamic-import 2.配置 ...

  2. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  3. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  4. Vue优化首屏加载

    背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...

  5. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  6. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

  7. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  8. SPA 首屏加载性能优化之 vue-cli3 拆包配置

    前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...

  9. 解决React首屏加载白屏的问题

    众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechang ...

  10. Vue项目使用CDN优化首屏加载

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...

随机推荐

  1. Stenciljs 学习之搭建项目

    框架介绍 stenciljs 是用于构建可重用.可扩展的设计系统的工具链.生成在每个浏览器中运行的小型.超快且 100% 基于标准的 Web Component. 更对介绍请参考官方网站 创建项目 使 ...

  2. 我们小公司,哪像华为一样,用得上IPD(集成产品开发)?

    在一些咨询或活动现场,我们经常听到有朋友说:我们是小公司,IPD(集成产品开发)太厚重了,不适合我们.但--到底哪里不合适? 提及IPD,成功的案例多以大公司为主:20世纪90年代,IBM在激烈的市场 ...

  3. IDEA使用——新建WEB项目及WEB项目的运行

    第一步:新建项目 1.2勾选Web Application 1.3填写项目名 第二步:项目配置 2.1在WEB-INF目录下新建 classes 和 lib 目录(过程省略) 2.2将classes目 ...

  4. 『手撕Vue-CLI』拉取模板名称

    前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖. 所以实现 ...

  5. 通过 InnoSetup 美化安装界面

    InnoSetup 的美化相应的帖子也比较多,但是代码不是很全...所以我专门出了这篇文章来记录下这个美化过程.废话不多说,先上个成果: 前端er们可以直接下载 vue-nw-seed 这个分支,一键 ...

  6. SSH-Web 工具之 shellinabox:一款使用 AJAX 的基于 Web 的终端模拟器 安装及使用教程

    本文转载自: shellinabox:一款使用 AJAX 的基于 Web 的终端模拟器 一.shellinabox简介 通常情况下,我们在访问任何远程服务器时,会使用常见的通信工具如OpenSSH和P ...

  7. 微信小程序预约视频号直播

    一.概述 微信小程序提供了可以唤起预约视频号直播弹窗的接口 reserveChannelsLive,该接口接收一个参数 noticeId,通过 getChannelsLiveNoticeInfo 接口 ...

  8. 8.26考试总结(NOIP模拟48)[Lighthouse·Miner·Lyk Love painting·Revive]

    告诉我,神会流血吗?--神不会,但你会. 前言 我直接打娱乐赛 T1 Lighthouse 解题思路 子集反演(但是 fengwu 硬要说是二项式反演咱也没法...) 发现其实 \(m\) 的值非常的 ...

  9. tab切换中嵌套swiper轮播

    今天在做官网的时候需要用到swiper多图轮播的功能,但是得嵌套在tab切换中,就在我把砖都搬完后,发现了个问题,就是我在进行tab切换后,发现原本设置的swiper的自动轮播竟然失效了,而且样式也是 ...

  10. docker——health(容器的健康检查)

    容器的健康检查机制 了解在dockerfile中容器的健康检查 # 在dockerfile中使用healthcheck指令,声明健康检测配置,用于判断容器主进程的服务状态是否正常,反映容器的实际健康状 ...