脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS React.lazy

JS利用 React.lazy 优化页面初次渲染

 更新时间：2022年07月26日 09:13:04   作者：​ Cyber_Bear​  
这篇文章主要介绍了JS利用 React.lazy 优化页面初次渲染,React.lazy 接受一个函数，这个函数需要动态调用import()，它必须返回一个Promise，该Promise需要resolve一个default export的React组件

一、需求背景

主站采用qiankun微前端方式嵌入新项目，qiankun会阻塞子应用资源加载，这导致应用白屏时间增加，希望在子应用端进行优化以减少白屏时间。

二、代码分析

利用 webpack-bundle-analyzer 检查当前 bundle

// 安装
npm install -D webpack-bundle-analyzer

// 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

// 使用 构建时自动弹出
npm run build

第三方库如echarts已经使用按需引入方案，从代码体积层面已无优化空间

由图可知，当前 bundle 体积集中在2.6cb4c9dd.chunk.js中，有必要进行代码分割

优化方向：

  • 使用路由懒加载，延迟加载在初次渲染时未用到的组件。
  • 使用 prefetch 功能，在首页必须资源加载完后自动加载其他路由页面资源，防止路由跳转白屏

三、技术实现

1. 路由懒加载

使用 React.lazy

const Market = React.lazy(() => import(/* webpackChunkName: "Market" */ './pages/market'))
const Record = React.lazy(() => import(/* webpackChunkName: "Record" */ './pages/Myrecord'))
const Detail = React.lazy(() => import(/* webpackChunkName: "Detail" */ './pages/detail'))

打包分析图:

由图可以看到，webpack 不仅将路由分离成了单独的bundle，并且对依赖进行了拆解，将首屏未用到的第三方依赖，如echarts、zrender拆分到单独的 bundle 中，只在需要的路由页进行加载，这大大减少了首屏资源加载体积（37%），将明显提前进入首屏渲染逻辑。

2. Prefetch 预获取

由于路由懒加载功能将非首屏依赖抽离出来，默认只在进入对应路由页面时刻进行加载，这会导致路由跳转时出现白屏或者loading，影响用户体验。所以我们使用 Prefetch预获取功能来帮助解决这个问题。

使用 webpackPrefetch：告诉浏览器将来可能需要该资源来进行某些导航跳转

const Market = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "Market" */ './pages/market'))
const MyRecord = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "MyRecord" */ './pages/record'))
const Detail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "Detail" */ './pages/detail'))

在首页资源加载完成后，其他路由页资源会以低优先级的顺序在后台下载。在跳转其他页面时，可以快速从命中缓存，从而提前进入渲染逻辑。提升用户体验。

到此这篇关于JS利用 React.lazy 优化页面初次渲染的文章就介绍到这了,更多相关JS React.lazy 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Webpack中使用环境变量的各种正确姿势

    Webpack中使用环境变量的各种正确姿势

    我们在开发项目中都会遇到这种场景,区分开发环境、生产环境、测试环境,不同场景请求不同的接口Api,这时候项目中配置的「环境变量」就登场啦,这篇文章主要给大家介绍了关于Webpack中使用环境变量的各种正确姿势,需要的朋友可以参考下
    2021-09-09
  • 原生JavaScript实现购物车效果

    原生JavaScript实现购物车效果

    这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • w3c编程挑战_初级脚本算法实战篇

    w3c编程挑战_初级脚本算法实战篇

    下面小编就为大家带来一篇w3c编程挑战_初级脚本算法实战篇。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • javascript实现轮显新闻标题链接

    javascript实现轮显新闻标题链接

    这篇文章主要介绍了javascript实现轮显新闻标题链接的相关资料,需要的朋友可以参考下
    2007-08-08
  • 关于JS中二维数组的声明方法

    关于JS中二维数组的声明方法

    下面小编就为大家带来一篇关于JS中二维数组的声明方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • layui select获取自定义属性方法

    layui select获取自定义属性方法

    今天小编就为大家分享一篇layui select获取自定义属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 一个javascript参数的小问题

    一个javascript参数的小问题

    2008-03-03
  • 包含中国城市的javascript对象实例

    包含中国城市的javascript对象实例

    这篇文章主要介绍了包含中国城市的javascript对象,以一个javascript的json数据格式存储为例分析了javascript存储城市信息的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 通过继承IHttpHandle实现JS插件的组织与管理

    通过继承IHttpHandle实现JS插件的组织与管理

    最近，项目中的用到的Js插件越来越多，有的是用原生javascript写的，有的是调用的jquery插件，页面上Js和Css文件的引用也越来越混乱，而且Js文件之间还有引用先后的依赖关系
    2010-07-07
  • 详解JavaScript数组的操作大全

    详解JavaScript数组的操作大全

    这篇文章主要给大家介绍js数组的操作，数组的创建，数组元素的发那个吻，数组元素的添加，数组元素的删除，数组的截取和合并，数组的拷贝，数组元素的排序，数组元素的字符串化等知识，对js数组的操作感兴趣的朋友可以参考下本篇文章
    2015-10-10

最新评论