目录一、需求背景二、代码分析三、技术实现1. 路由懒加载2. Prefetch 预获取一、需求背景 主站采用qiankun微前端方式嵌入新项目,qiankun会阻塞子应用资源加载,这
主站采用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
中,有必要进行代码分割
优化方向:
使用 React.lazy
const Market = React.lazy(() => import( './pages/market'))
const Record = React.lazy(() => import( './pages/Myrecord'))
const Detail = React.lazy(() => import( './pages/detail'))
打包分析图:
由图可以看到,webpack 不仅将路由分离成了单独的bundle,并且对依赖进行了拆解,将首屏未用到的第三方依赖,如echarts
、zrender
拆分到单独的 bundle 中,只在需要的路由页进行加载,这大大减少了首屏资源加载体积(37%),将明显提前进入首屏渲染逻辑。
由于路由懒加载功能将非首屏依赖抽离出来,默认只在进入对应路由页面时刻进行加载,这会导致路由跳转时出现白屏或者loading
,影响用户体验。所以我们使用 Prefetch
预获取功能来帮助解决这个问题。
使用 webpackPrefetch
:告诉浏览器将来可能需要该资源来进行某些导航跳转
const Market = lazy(() => import( './pages/market'))
const MyRecord = lazy(() => import( './pages/record'))
const Detail = lazy(() => import( './pages/detail'))
在首页资源加载完成后,其他路由页资源会以低优先级的顺序在后台下载。在跳转其他页面时,可以快速从命中缓存,从而提前进入渲染逻辑。提升用户体验。
到此这篇关于JS利用 React.lazy 优化页面初次渲染的文章就介绍到这了,更多相关JS React.lazy 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JS利用 React.lazy 优化页面初次渲染
本文链接: https://www.lsjlt.com/news/165210.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0