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