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

目录
  • 一、需求背景
  • 二、代码分析
  • 三、技术实现
    • 1. 路由懒加载
    • 2. Prefetch 预获取

一、需求背景

主站采用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 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • php使用QueryList轻松采集js动态渲染页面方法

    QueryList使用jQuery的方式来做采集,拥有丰富的插件.下面来演示QueryList使用PhantomJS插件抓取JS动态创建的页面内容. 一.安装 使用Composer安装: 1.安装QueryList composer require jaeger/querylist GitHub: https://github.com/jae-jae/QueryList 2.安装PhantomJS插件 composer require jaeger/querylist-phantomjs Git

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • javascript页面渲染速度测试脚本分享

    复制代码 代码如下: /* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>......</head> 复制代码 代码如下: ....../* 页面最末端,计算页面加载耗用的时间 */</body&g

  • vue.js,ajax渲染页面的实例

    关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode.这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了.起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难.让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗.是不难啊,可是为什么我心里天然觉得很难呢? CNode是给了我们数据接口,ajax也就那

  • 通过nodejs 服务器读取HTML文件渲染到页面的方法

    1.分别简单实现三个备用页面. login.html页面 index.html页面 代码片段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21;

  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"

  • 详解Next.js页面渲染的优化方案

    在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题.由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它.乘着农历春节前工地活少所以稍微研究一下. 第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象? Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,

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

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

    目录 一.需求背景 二.代码分析 三.技术实现 1. 路由懒加载 2. Prefetch 预获取 一.需求背景 主站采用qiankun微前端方式嵌入新项目,qiankun会阻塞子应用资源加载,这导致应用白屏时间增加,希望在子应用端进行优化以减少白屏时间. 二.代码分析 利用 webpack-bundle-analyzer 检查当前 bundle // 安装 npm install -D webpack-bundle-analyzer // 配置 const BundleAnalyzerPlugi

  • JS技巧Canvas 性能优化脏矩形渲染实例详解

    目录 正文 画布该如何更新? 脏矩形渲染原理 脏矩形渲染实现 性能测试 结尾 正文 使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系. 我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的.但如果图形数量很多,那绘制起来可能就出现卡顿了. 那么,有没有什么办法来优化一下?有,脏矩形渲染. 画布该如何更新? 这里我们假设这么一个场景,画布上绘制了随机位置大量的绿球,然

  • 利用React Router4实现的服务端直出渲染(SSR)

    我们已经熟悉React 服务端渲染(SSR)的基本步骤,现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构.毕竟大多数的应用都需要用到web前端路由器,所以要让SSR能够正常的运行,了解路由器的设置是十分有必要的 基本步骤 路由器配置 前言已经简单的介绍了React SSR,首先我们需要添加ReactRouter4到我们的项目中 $ yarn add react-router-dom # or, using npm $ npm install react-router

  • React 性能优化之非必要的渲染问题解决

    React 性能优化之非必要的渲染问题解决

    目录 1. 非必要组件渲染 2. 解决方案之 shouldComponentUpdate 3. 解决方案之 PureComponent 4. 解决方案之 React.memo 5. useMemo 和 useCallback 1. 非必要组件渲染 在 React 工程中,在改变 React 状态时,我们希望对整个页面的影响越小越好.然而实际情况是更改掉某些属性之后,除了会导致组件本身的重新渲染,也可能会导致其相关的组件也发生重新渲染.请看下面的例子: 新建一对父子组件 // 父组件: impor

  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

  • jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo

  • js利用cookie实现记住用户页面操作

    前言 开发过程中,有时候会遇到一些类似需求,比如记住用户在浏览器层面所做的操作.之前做过一个功能,当时使用了一个拖拽插件展示一个类似九宫格的报表图,每个图形都可以显示和隐藏,如果用户点击了显示或隐藏按钮,那么下次进入系统时浏览器保留上一次的操作结果.核心部分是使用js对cookie进行操作,具体业务部分则是触发点击图形事件时,如果是隐藏,则将该图形对应的div从cookie中删除,点击显示时,将图形div写入cookie.本文只记录cookie部分操作,具体业务代码大家可以根据自己的实际情况去写

  • React 性能优化方法总结

    React 性能优化方法总结

    目录 前言 为什么页面会出现卡顿的现象? React 到底是在哪里出现了卡顿? React 有哪些场景会需要性能优化? 一:父组件刷新,而不波及子组件. 第一种:使用 PureComponent 第三种:函数组件如何判断props的变化的更新呢? 使用 React.memo函数 使用 React.useMemo来实现对子组件的缓冲 一:组件自己控制自己是否刷新 三:减少波及范围,无关刷新数据不存入state中 场景一:无意义重复调用setState,合并相关的state 场景二:和页面刷新没有相

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

随机推荐