JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染
一、需求背景
主站采用qiankun
微前端方式嵌入新項(xiàng)目,qiankun
會(huì)阻塞子應(yīng)用資源加載,這導(dǎo)致應(yīng)用白屏?xí)r間增加,希望在子應(yīng)用端進(jìn)行優(yōu)化以減少白屏?xí)r間。
二、代碼分析
利用 webpack-bundle-analyzer
檢查當(dāng)前 bundle
// 安裝 npm install -D webpack-bundle-analyzer // 配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] } // 使用 構(gòu)建時(shí)自動(dòng)彈出 npm run build
第三方庫(kù)如echarts
已經(jīng)使用按需引入方案,從代碼體積層面已無(wú)優(yōu)化空間
由圖可知,當(dāng)前 bundle 體積集中在2.6cb4c9dd.chunk.js
中,有必要進(jìn)行代碼分割
優(yōu)化方向:
- 使用路由懶加載,延遲加載在初次渲染時(shí)未用到的組件。
- 使用 prefetch 功能,在首頁(yè)必須資源加載完后自動(dòng)加載其他路由頁(yè)面資源,防止路由跳轉(zhuǎn)白屏
三、技術(shù)實(shí)現(xiàn)
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 不僅將路由分離成了單獨(dú)的bundle,并且對(duì)依賴(lài)進(jìn)行了拆解,將首屏未用到的第三方依賴(lài),如echarts
、zrender
拆分到單獨(dú)的 bundle 中,只在需要的路由頁(yè)進(jìn)行加載,這大大減少了首屏資源加載體積(37%),將明顯提前進(jìn)入首屏渲染邏輯。
2. Prefetch 預(yù)獲取
由于路由懶加載功能將非首屏依賴(lài)抽離出來(lái),默認(rèn)只在進(jìn)入對(duì)應(yīng)路由頁(yè)面時(shí)刻進(jìn)行加載,這會(huì)導(dǎo)致路由跳轉(zhuǎn)時(shí)出現(xiàn)白屏或者loading
,影響用戶(hù)體驗(yàn)。所以我們使用 Prefetch
預(yù)獲取功能來(lái)幫助解決這個(gè)問(wèn)題。
使用 webpackPrefetch
:告訴瀏覽器將來(lái)可能需要該資源來(lái)進(jìn)行某些導(dǎo)航跳轉(zhuǎn)
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'))
在首頁(yè)資源加載完成后,其他路由頁(yè)資源會(huì)以低優(yōu)先級(jí)的順序在后臺(tái)下載。在跳轉(zhuǎn)其他頁(yè)面時(shí),可以快速?gòu)拿芯彺?,從而提前進(jìn)入渲染邏輯。提升用戶(hù)體驗(yàn)。
到此這篇關(guān)于JS利用 React.lazy 優(yōu)化頁(yè)面初次渲染的文章就介紹到這了,更多相關(guān)JS React.lazy 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)拖尾
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)拖尾效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02javascript框架設(shè)計(jì)讀書(shū)筆記之模塊加載系統(tǒng)
本文是司徒正美的《javascript框架設(shè)計(jì)》的第二章模塊加載系統(tǒng)的讀書(shū)筆記,根據(jù)自己的理解,簡(jiǎn)要的跟大家講述了本章的主要內(nèi)容,方便大家更好的學(xué)習(xí)。2014-12-12一個(gè)JavaScript防止表單重復(fù)提交的實(shí)例
防止重復(fù)表單提交的方法有很多,本文使用JavaScript來(lái)實(shí)現(xiàn)防止表單重復(fù)提交,很簡(jiǎn)單,但很實(shí)用,新手朋友們不要錯(cuò)過(guò)2014-10-10淺談Javascript中Object與Function對(duì)象
JavaScript的面向?qū)ο笫腔谠蔚?,所有?duì)象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function , Function instanceof Object都為true而迷惑,所以首先看下對(duì)象的實(shí)例2015-09-09js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中遍歷Map對(duì)象的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript實(shí)現(xiàn)類(lèi)似淘寶的購(gòu)物車(chē)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)購(gòu)物車(chē)特效的相關(guān)資料,文中通過(guò)示例代碼詳細(xì)介紹了,利用Javascript如何實(shí)現(xiàn)類(lèi)似淘寶購(gòu)物車(chē)中商品的單選、全選、刪除、修改等功能,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08js簡(jiǎn)單網(wǎng)速測(cè)試方法完整實(shí)例
這篇文章主要介紹了js簡(jiǎn)單網(wǎng)速測(cè)試方法,以完整實(shí)例形式分析了JavaScript基于網(wǎng)頁(yè)圖片下載進(jìn)行測(cè)試網(wǎng)速的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12