16 | 按需加载：如何提升应用打开速度？
王沛
你好，我是王沛。今天我们来聊聊如何提升 React 应用的打开速度。
随着前端技术的不断演进，以及浏览器性能的不断提高，前端应用的开发也变得越来越复杂，因为更多的功能被放到了前端去实现。
这也让我们面临这样一个挑战：如何控制好整个应用的大小，以及如何提升加载性能，才能确保应用的打开速度够快。
我们来分析一下，看怎么解决这个问题。在应用加载的性能指标中，其中一个很重要的指标就是首屏打开速度。也就是说，当用户打开你的应用之后，他要花多久才能看到首页面。根据统计显示，如果首页打开时间超过 3 秒，那么就会流失掉 40% 的用户。所以这项指标的重要性不言而喻，也让我们在完成需求开发的同时，要时刻有意识地去控制包的大小。要知道，包越小，首屏打开速度就越快。
照此来看，为了提高首屏加载速度，我们就需要对应用进行分包。
首先，在打开某个页面时，只加载这个页面相关的内容，也就是按需加载。
同时，为了提升后续应用的打开速度，就需要采用高效的缓存策略，避免前端资源的重复下载。
所以这节课，我们首先来看看在 React 应用中如何实现按需加载。然后呢，我会和你介绍下 Service Worker 技术，看看怎么利用 Service Worker 来缓存前端资源。虽然它和 React 没有必然的联系，但是作为目前最为有效的提升加载性能的手段，你也需要进行了解并能正确使用。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何通过按需加载和Service Worker技术来提升React应用的加载性能。随着前端技术的发展，控制应用大小和提升加载性能变得至关重要。首屏打开速度是关键指标，超过3秒将导致用户流失。为了提高首屏加载速度，文章提出了按需加载和前端资源缓存的策略。在React应用中，可以使用动态import语句定义按需加载的起始模块，或者使用react-loadable实现组件的异步加载。此外，文章还介绍了如何利用Service Worker技术来缓存前端资源，以提高加载性能。通过这些策略，可以有效减少首屏加载时间，提升用户体验。文章还提到了Service Worker的注册、初始化缓存机制和拦截请求的步骤，以及如何使用Service Worker来实现前端静态资源的缓存。总的来说，本文通过介绍按需加载和Service Worker技术，为读者提供了提升应用加载性能的有效方法。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59
《React Hooks 核心原理与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(12)
- 最新
- 精选
别拦我让我学老师，react-loadable与react自身提供的懒加载的api，React.lazy(() => import())的区别是什么？作者回复: 可以认为没有区别，因为核心机制都是 import。只是 react-lodable 提供的 API 和选项比 React.lazy 丰富。
2021-07-287
Brave1. 合并请求接口 2. 使用OSS服务加载图片资源 3. 制定编码规范、提取公共组件、减少重复代码2021-08-2524
珍惜眼前人老师好，serviceWorker的代码，可以加到 https://codesandbox.io/s/react-hooks-course-20vzg 吗，想跟着实现一下2021-07-022
Geeker之前项目中有一个需求是，合并多个指定 url 的请求（高频请求，请求地址相同，请求参数不同），想合并请求参数并只请求一次。不知道这样的需求用 service worker 是不是可以实现，求思路，谢谢。2021-07-0132
大神博士这里的service worker 缓存 和 设置强缓存有什么区别？2022-02-171- 大神博士```javascript import React, { Suspense } from 'react'; import Header from './Header'; import SideBar from './SideBar'; // content 和 footer 部分延迟加载 const Content = React.lazy(() => import('./Content')); const Footer = React.lazy(() => import('./Footer')); function App() { return ( <div className="page"> <Header /> <SideBar /> <Suspense fallback={<div>Loading...</div>}> <Content /> </Suspense> <Suspense fallback={<div>Loading...</div>}> <Footer /> </Suspense> </div> ); } export default App; ```2021-07-021
- INFRA_UEX听说 react-loadable 已经不在维护了？不知道是不是确切。2022-11-07归属地：天津
七秒想请教下王老师，这个service worker的代码、注册service worker的代码以及应用的代码 在服务器中说什么样的位置关系，希望得到解答，感激不尽！2021-10-26- 知故1. 使用http 2.0 2. cdn2021-09-03
君const AsyncLoadable = (dir: string, loading = Loading) => Loadable({ loader: () => import(`@/components/${dir}`), loading }) const LazyComp1 = AsyncLoadable('lazyComp1') const LazyComp2 = AsyncLoadable('lazyComp2') 这样的写法貌似不生效 组件无法渲染2021-07-07
收起评论