【用户体验分析报告】 按需加载组件,导致组件渲染卡顿,影响交互体验?组件拆包预加载方案来了!

首先,我们看一些针对《如何提升应用首屏加载体验》的文章,提到的必不可少的措施,便是减少首屏幕加载资源的大小,而减少资源大小必然会想到按需加载措施。本文提到的便是一个基于webpack 插件与 react 组件实现的一套研发高度自定义、组件按需加载的资源预加载方案.

🧐 为什么要做这么一套预加载方案呢?它存在的必要性在哪里?🧐

常规组件按需加载方案缺点

    1. React.lazy 组件按需加载
      组件渲染时加载组件资源
react.lazy(()=>import('xxxx/component'))

优点:拆分组件代码,按需加载, 减少首屏的资源加载,提升页面首屏速度。

    1. 组件动态加载
      执行代码 import() 时加载组件资源
useEffect(() => {import('xxxx/component').then((loadScript) => {})
}, [])

优点:拆分组件代码,开发者可以更细粒度地控制组件按需加载的时机。

二者共有缺点:

代码拆分后,组件资源异步加载存在耗时,视觉上会渲染出 React.Suspensefallback 以处理加载资源时的页面展示问题,当组件资源特别大或网络不稳定时都有可能会出现 loading 时间过长以致于影响用户体验

如图:

image.png

image.png

由于资源加载存在近4s的耗时,组件渲染被延迟,这种情况下,便导致了我们虽然通过减少了首屏资源提升了首屏加载体验,但却让用户在后续使用过程中出现了体验断层,甚至是页面白屏的情况,这是用户不能接受的。

懒加载&预加载方案&流程介绍

预加载的目的让被懒加载的组件资源提前进行对应的资源请求,而不是渲染时请求, 本文为大家介绍的是基于 route-resource-preload 实现的一套加载时机高度自定义的资源预加载方案。

该方案基于 @route-resource-preload/webpack-plugin 及 @route-resource-preload/react, 分别对应构建时运行时:

构建时流程图:
构建时流程图

构建时 通过 dynamic API 及 webpack plugin 对模块进行拆包的同时,还会将preloadKey(开发者自定义的预加载标识)import-module-url(import 模块路径)module(output产物)三者之间的关系以json形式进行保存,并允许应用端访问。

生成的JSON文件:
image.png
JSON:
image.png

开发者基于 JSON,可以判断出你想进行预加载的资源应该分类到哪个preloadKey下及preloadKeymodule间的映射关系。

运行时流程图:
运行时流程图
运行时 则是基于构建出的json,开发者通过设置Preloader/PreloadLinkpreloadKey,对应的相关资源将被预加载,并基于 dynamic API 渲染组件。

项目效果演示

1. 真实用户场景打开 Modal( Modal基于 webpack module federation 引入)体验模拟

  • 无预加载时:点击按钮后,拉取对应的拆包资源及远程 module federation 组件资源,请求完成后渲染组件,存在体验卡顿

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bY1Gihc-1690469354458)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c66c7635afe49a8acc2481d0e4ff4a3~tplv-k3u1fbpfcp-watermark.image?)]

  • 有预加载时:hover到某个区域/某个组件渲染时(开发者自定义)即可触发资源预加载,点击按钮后立即渲染组件,不存在体验卡顿。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owp86xHr-1690469354458)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b700e0ed414345b780c8a0651351543c~tplv-k3u1fbpfcp-watermark.image?)]

2. 离线场景体验模拟

为了对比效果(有/无预加载)更加直观,以下将采用离线网络的场景下进行展示。

  • 无预加载时:按需加载在离线网络环境下会白屏。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ieUGE2ke-1690469354458)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30b24a4623234d2db3959bd2c4c86b15~tplv-k3u1fbpfcp-watermark.image?)]

  • 有预加载时:按需加载在离线网络环境下页面渲染体验正常,即实现拆包按需加载的用户体验等同于未拆包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5hKz3syW-1690469354458)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3598c1b81b81440f8df9e26a6fd531a8~tplv-k3u1fbpfcp-watermark.image?)]

本预加载机制解决的问题

  1. Any code can be split: 通过以上的预加载机制,基于拆包不影响用户体验的前提下,便能够通过应用内 Any code can be split(一切代码都可以被拆包),让开发者没有了因为单页面资源过大影响应用性能的烦恼,SPA(单页面应用) 也可以拥有极致的首屏幕加载体验和交互体验,🐟与🐻掌兼得。
  2. module federation(模块联邦) 组件预加载: 对于 webpack 的 module federation(模块联邦)而言,由于 module federation 打包出来的资源默认采用了按需加载的方案,因此当我们渲染一个比较大的 module federation 组件时,也会存在体验卡顿的情况,这时通过对该module federation组件进行预加载便可解决该体验问题。
  3. 革新开发者对懒加载的概念,减少开发者心智负担:因不用再担心懒加载资源包过大以至于影响用户体验的烦恼,开发者可以简单粗暴地基于页面维度对某个路由渲染的组件进行懒加载,不需要再从组件纬度去分析是因为哪个组件资源包过大导致的体验问题。
const PageA = dynamic({loader: () => import('./PageA'),
})<Switch><Route path='/A' element={<PageA />} />
</Switch>

在线体验DEMO地址
效果数据对比

如果本文你觉得有用,请给我点个👍吧,让更多的朋友看见~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Android 13]PowerManagerService系列1--启动流程和核心方法

hongxi.zhu 2023-7-28 Android 13 PowerManagerService(简称PMS)主要是负责协调、管理设备CPU资源&#xff0c;并提供功能接口给应用框架层或应用层申请获取CPU资源的一个服务&#xff0c;例如&#xff1a;亮灭屏、关机、WakeLock管理、Dreamland(屏保模式)、休眠时间等行为。 …

云原生落地实践的25个步骤

一、什么是云原生&#xff1f; 云原生从字面意思上来看可以分成云和原生两个部分。 云是和本地相对的&#xff0c;传统的应用必须跑在本地服务器上&#xff0c;现在流行的应用都跑在云端&#xff0c;云包含了IaaS,、PaaS和SaaS。 原生就是土生土长的意思&#xff0c;我们在开始…

基于OAI与Ueransim的5G网络切片平台构成简述

自定义多切片核心网构建 为了实现在同一台机器上同时对每一个切片启动一套单独的核心网&#xff0c;并且可以同时启动多套核心网&#xff0c;我们在官方提供的核心网模板的基础上进行适当的修改&#xff0c;扩展出其他可以正常运行的核心网&#xff0c;由此我们可以实现在同一…

Swagger之Hello World !

目录 ■1&#xff0e;前言・Swagger介绍 ■2&#xff0e;例子&#xff0c;如果基于Spring Boot项目&#xff0c;实现Swagger---非常简单 2&#xff0e;1&#xff0e;已有的SpringBoot项目 2&#xff0e;2&#xff0e;修改POM文件 2&#xff0e;3&#xff0e;添加Config文件…

DAY01_Spring简介IOC、DI入门案例Bean基础配置Bean实例化Bean生命周期依赖注入(DI配置)

目录 一 Spring1 Spring简介1.1 为什么要学1.2 学什么1.3 怎么学 2 初识Spring2.1 Spring家族2.2 Spring发展史 3 Spring体系结构问题导入3.1 Spring Framework系统架构图3.2 Spring Framework课程学习路线 4 Spring核心概念问题导入4.1 目前我们代码存在的问题4.2 核心概念 二…

拿捏--->最大公约数

文章目录 题目描述算法思路代码示例辗转相除法暴力穷尽法更相减损法Stein法 题目描述 给定两个数&#xff0c;求这两个数的最大公约数 例如&#xff1a; 输入&#xff1a;20 40 输出&#xff1a;20 算法思路 最大公约数&#xff1a;即两个数据中公共约数的最大者 代码示例…

分冶算法 剑指 07 重建二叉树 排序算法:剑指45 把数组排成最小的数 10-I 斐波那契数列

来记录几个注意事项 1.vector容器里利用find&#xff08;&#xff09;函数 不同于map&#xff08;map有find方法&#xff09;&#xff0c;vector本身是没有find这一方法&#xff0c;其find是依靠algorithm来实现的。 所以要包含头文件 #include <iostream> #include <…

SpringBoot 实现跨域的六种方式

目录 1.通过SpringSecurity方式配置 2.使用Spring提供的CorsFilter注入Bean&#xff08;推荐&#xff09; 3.使用注解CrossOrigin注解&#xff08;繁琐&#xff09; 4.通过ResponseBodyAdvice 实现跨域 5.通过HttpServletResponse设置跨域 6.通过WebMvcConfigurer 实现跨…

奔驰CAN FD嵌入式控制器开发硬件设计及应用趋势

CAN FD作为一种性能可靠、功能完善、成本合理的远程网络通信控制方式&#xff0c;集成CAN/CAN FD控制器的MCU、核心板、工控板及物联网解决方案已经被广泛应用到各个控制系统中&#xff0c;例如汽车电子、自动控制、智能大厦、电力系统、能源物流、智慧改装等各个领域。 中国经…

Postgresql警告日志的配置

文章目录 1.postgresql与日志有关的参数2.开启日志3.指定日志目录4.設置文件名format5.設置日志文件產出模式6.設置日志记录格式7.日誌輪換7.1非截斷式輪換7.2 截斷式輪換 8.日誌記錄內容8.1 log_statement8.2 log_min_duration_statement 9 輸出範本 1.postgresql与日志有关的…

如何使用Webman框架实现多语言支持和国际化功能?

如何使用Webman框架实现多语言支持和国际化功能&#xff1f; Webman是一款轻量级的PHP框架&#xff0c;提供了丰富的功能和扩展性&#xff0c;使得开发人员能够更加高效地开发Web应用程序。其中&#xff0c;多语言支持和国际化功能是Web应用程序中非常重要的一项功能&#xff…

SQL编写规范

文章目录 1.命名规范&#xff1a;2.库表设计&#xff1a;3.查询数据&#xff1a;4.修改数据&#xff1a;5.索引创建&#xff1a; 1.命名规范&#xff1a; 1.库名、表名、字段名&#xff0c;必须使用小写字母或数字&#xff0c;不得超过30个字符。 2.库名、表名、字段名&#…

251_多线程_创建一个多线程的图像处理应用,其中每个线程负责对一部分图像进行处理,然后将处理后的结果合并为最终图像

举一个更丰富的例子来说明多线程的用法。 我们将创建一个多线程的图像处理应用,其中每个线程负责对一部分图像进行处理,然后将处理后的结果合并为最终图像。 这个例子可以更好地展示多线程并发处理的优势。 假设有一个函数 processImageSection,它会对图像的一个特定区域进…

windows编译新版本linphone

目录​​​​​​​ 环境 获取源码(使用5.0.0版本5.3.0-alpha有问题编译不过) 编译环境准备 编译&#xff08;使用ninja&#xff09; 编译&#xff08;不适用使用ninja&#xff09; 报错解决 linphone-desktop是一款基于SIP的标准开源网络电话系统&#xff0c;它使用了Qt…

计算机视觉(五)深度学习基础

文章目录 深度学习基础卷积神经网络与传统神经网络区别深度学习与神经网络的区别 目标函数选择合适的目标函数Softmax层 改进的梯度下降梯度消失的直观解释激活函数学习步长SGD的问题Momentum动量Nesterov MomentumAdagradRMSpropAdam 各种梯度下降算法比较关于算法选择的建议B…

【Code审查工作经验之谈】

作为居住在软件开发行业的从业人员&#xff0c;我们都知道Code审查是一个必要的过程&#xff0c;用来确保团队的代码质量、减少bug、提高应用程序的可维护性等等。今天我将分享一下我个人的Code审查工作经验&#xff0c;希望能对大家有所帮助。 确定Code审查的目的 在开始Cod…

Adobe Camera Raw 常用快捷键

戳下方链接&#xff0c;后台回复“230707PS插件”获取相关插件应用 回复“230708PS插件教程”获取教学链接; 回复“230730camera快捷键”获取快捷键链接。 原文链接&#xff1a;https://mp.weixin.qq.com/s/tVNDBPUtKrUtfGmPKJ0Tdw 目标调整工具 作用WindowsmacOS选取目标调整工…

【Python】Web学习笔记_flask(1)——模拟登录

安装flask pip3 install flask 第一部分内容&#xff1a; 1、主页面输出hello world 2、根据不同用户名参数输出用户信息 3、模拟登录 from flask import Flask,url_for,redirectappFlask(__name__)app.route(/) def index():return hello worldapp.route(/user/<uname…

【Mysql 】8.0 窗口函数

Mysql 窗口函数 窗口函数概述

实际开发中,React应用常见问题【持续更新中】

实际开发中&#xff0c;React应用常见问题【持续更新中】 实际开发中&#xff0c;React应用常见问题【持续更新中】 一、路由相关 “react-router-dom”: “^6.14.2”, “react”: “^18.2.0”, 1、监听路由 import { useLocation } from react-router-domexport default func…