前端预加载的3种方式 - 产品大佬都说好

2024-02-08 04:44

本文主要是介绍前端预加载的3种方式 - 产品大佬都说好,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

公众号:程序员白特,可加前端群

概述

性能优化一直是个热门的话题,但是随着设备性能和网络速度的提升,需要做性能优化的项目可能并不是很多,所以每次做优化都是技术实践和累积的好机会。

性能优化的方式有很多,本文将从实例出发带你了解性能优化之预加载。

场景复现

页面内容和加载时序

近期开发了一个移动端 H5 页面,页面大概如下:

  • 一个普通的 loading 页面,加载静态资源和请求接口
  • 客户信息展示页,基础信息和 Tab1 扩展信息展示
  • Tab2 为数据可视化页面,展示一些图表


加载的时序如下:

  • 先请求入口 JS 文件 main.js
  • 再请求登录用户信息接口
  • 然后动态加载页面的 JS 文件 Profile.js
  • 最后请求客户相关数据接口,并展示页面

问题出现和分析

页面开发完成后,产品在验收环节提出了页面加载较慢的问题。
经过简单研究,初步梳理出了慢的几点原因:

  • 移动端性能和网络原因影响,PC 端加载速度正常
  • 接口请求返回较慢
  • 静态资源加载慢

第一点移动端设备的情况总是比较复杂,无法改变;第二点需要服务端同学去优化;主要看第三点,具体分析后,得到了慢的原因:

  • 前端加载时序整体是一个串行的状态,页面需要等待的时间较长
  • 页面中使用到了图表库 Echarts,这个库相对比较大,即时按官方指南使用了按需加载,打包出来的体积还是比其他页面大许多

解决方案制定

对于第一点目前某些页面对用户信息有强依赖,所以都是等用户信息返回后,再去加载页面 JS,就造成了一个串行的结果。

可以通过用户信息获取和页面 JS 同时进行来优化,但是这样需要去修改对用户信息有强依赖的页面,影响范围较大,暂不考虑。

故采用另外一种方式解决并行问题,预加载页面 JS。
处理完第一点后的加载时序:

第二点就用动态加载 Echarts 组件来处理,并在第一个页面预加载这个组件来锦上添花,减少首页加载体积并在切换时能快速展示图表。

最终的加载时序:

技术优化

预加载的三种方式:

  • import 动态加载,在某个节点 import 先发起,使用时可直接得到内容
  • react-routerlazy 属性,v6.4+ 支持
  • webpack 预加载,v4.6.0+ 支持

在开始前,我们先体验下预加载的效果。

  • 无预加载
  • 预加载

页面主要加载分为三步骤:

  • 加载入口 main.js,请求登录用户信息接口
  • 登录完成,加载页面 JS
  • 请求 data 相关数据

可以看到有预加载的情况下,登录信息请求完成后页面就立即显示出来了。

import

import 函数是 ES2020 提案新增的功能,用于支持动态加载模块。

使用方法如下:

import * as mod from '/my-module.js'import('/my-module.js').then((mod2) => {console.log(mod === mod2)
})

React 项目中会配置 lazy 和 Suspense 使用,使用方法入如下:

import { lazy } from 'react';const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'))function App() {return (<Suspense fallback="loading..."><h2>Preview</h2><MarkdownPreview /></Suspense>)
}

lazy 会将 import 方法返回对象的 default 值作为 React 节点返回,这样我们可以在 JSX 中直接渲染组件。同时 lazy 只有在尝试渲染该组件的时候,才会去调用 import 方法,所以是动态加载。
接下来看下项目中的 main.js 和动态加载路由配置:

// react-router
const config = [{path: '/home',component: React.lazy(() => import(/* webpackChunkName: 'IndexHome' */'@/pages/Home'))
}]// main.js 获取完用户信息后加载路由页面
import React, { useState, useEffect } from 'react'
import { Outlet } from 'react-router-dom'const LayoutPage = () => {const [useInfo, setUserInfo] = useState()const hasLogin = !!userInfouseEffect(() => {// ... getUserInfo}, [])return (<div>{hasLogin && <Outlet />}</div>)
}export default LayoutPage

支持预加载后代码如下:

// react-router 返回预加载函数
function lazyWithPreload(factory) {return {component: React.lazy(factory),preload: factory}
}const config = [{path: '/home',...lazyWithPreload(() => import(/* webpackChunkName: 'IndexHome' */'@/pages/Home'))
}]// main.js
import React, { useState, useEffect } from 'react'
import { Outlet, matchRoutes, useLocation } from 'react-router-dom'const LayoutPage = () => {const [useInfo, setUserInfo] = useState()const hasLogin = !!userInfoconst location = useLocation()useEffect(() => {// ... getUserInfo 同时发起预加载页面内容const matched = matchRoutes(routes, location) if (matched) {const pageRoute = matched[matched.length - 1]pageRoute.route?.preload?.()}}, [])return (<div>{hasLogin && <Outlet />}</div>)
}export default LayoutPage

可以看到代码中提供了 lazyWithPreload 方法,这方法中返回的 preload 方法,就是可以直接执行 import 操作。

预加载的操作就在于我们把 import 方法先调用了,这样页面 js 的加载就和请求登录用户信息是并行发起的。

react-router lazy 属性

react-router 在 v6.4+ 版本支持了 lazy 属性,该属性现实了动态加载页面,并且支持并行发起页面需要的接口数据请求。

使用方式如下:

  • 使用支持 lazy 能力的路由创建方式
const router = createHashRouter(routerConfig)function App() {return  <RouterProvider router={router} />
}
  • 路由配置使用 lazy 属性
const routerConfig = [{element: <Layout />,children: [{ path: '/home', lazy: () => import('./pages/home') }]
}]
  • home/index.jsx 文件改造,支持导出 (loader, Component, ErrorBoundary)
export async function loader({ request }) {let data = await fetchData(request);return json(data);
}export function Component() {let data = useLoaderData();return (<div>{data}</div>)
}export function ErrorBoundary() {return 'error'
}

完成以上步骤,在访问 /home 路径的时候,代码会预加载页面 JS 和发起页面接口请求。

可以看到在页面显示的同时,data 数据也已经有了。

webpack 预加载

Webpack 4.6.0+ 支持了预加载能力,一个是 prefetch,一个是 preload

prefetch: 资源在未来的某个时刻使用,在核心代码加载完成之后带宽空闲的时候再去加载需要用到的模块代码
preload: 资源在当前页面中也会使用,和核心代码文件一起去加载的。

import(/* webpackPrefetch: true */ './path/to/LoginModal.js')import(/* webpackPreload: true */ './path/to/LoginMdal.js')

webpack 预加载和路由无关联,也就是说不管加载什么页面的时候,这段 JS 都会预加载,这可能会出现加载资源浪费情况。

小结

综合上述技术方案和当前项目技术栈考虑,最终使用了第一种方案。

总结

本文从示例出发,带你了解了如何根据项目具体情况做对应的优化。预加载知识你可以亲自去体验下,会有更深的理解。

这篇关于前端预加载的3种方式 - 产品大佬都说好的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/689930

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满