PWA（Progressive Web App）是一种能够提供类似原生应用体验的 Web 应用程序。PWA 具有快速、可靠且具有离线功能的特性，能够提升用户体验和用户留存率。但是，由于 PWA 应用需要缓存大量的静态资源，如何支持按需加载成为了一个重要的问题。
什么是按需加载
按需加载（Lazy Loading）是一种优化前端性能的方法，它能够将页面的大量资源分成多个页面区块，只有当用户需要访问该区块时才进行加载。这种方式能够避免页面打开速度过慢，同时也能够减少浏览器对静态资源的请求次数，从而减轻服务器的压力并提升用户体验。
PWA 应用需要离线缓存非常多的静态资源，但是用户很可能不会在一开始就访问所有的资源。因此，PWA 应用需要支持按需加载。以下是几种常用的按需加载方法。
1. 利用 service worker
PWA 应用的离线缓存通常是通过 service worker 来实现的。因此，我们可以在 service worker 中进行按需加载。我们可以在 service worker 中监听 fetch 事件，当用户访问到需要按需加载的请求时，再去获取相应的资源。
以下是示例代码，假设我们要按需加载一个名为 lazy.js 的 js 文件：
-- -------------------- ---- ------- ------------------------------ --------------- - -- ---------------------------------------- - ------------------ ---------------------------------- - ------ --- --------------------------- ------ ------ ---------------- - -------- ---------------- ------------------------- - -- -- -- - ---展开代码
在这个例子中，我们首先判断用户请求的 URL 是否是需要按需加载的资源。如果是，我们就利用 fetch API 去获取该文件。如果请求成功，则直接返回该文件。如果请求失败，则返回一个包含我们想要执行的 JS 代码的 response。
2. 利用 IntersectionObserver
IntersectionObserver 是一种能够监测元素是否在视口中显示的 API，它能够帮助我们实现按需加载。
以下是示例代码，假设我们要按需加载一个名为 lazy.css 的 css 文件：
-- -------------------- ---- ------- ---- -------------------- ---- ------------ --- ------ -------- ----- -------- - --- ---------------------------- -- - --------------------- -- - -- ---------------------- - ----- -------- - ------------------------------- ------------ - ------------- ------------- - ------------ ------------------------------------ --------------------------------- - --- --- ------------------------------------------------------------ ---------展开代码
在这个例子中，我们创建了一个 IntersectionObserver，它会监听一些 DOM 元素是否进入了视口。当需要按需加载的元素进入了视口后，我们就创建一个带有路径为 /lazy.css 的 <link> 元素，并添加到 <head> 中。
3. 利用 import()
JavaScript 有一个动态加载模块功能，即 import() 函数，我们可以利用它实现按需加载。
以下是示例代码，假设我们要按需加载一个名为 lazy-module.js 的模块：
button.addEventListener('click', async () => { const lazyModule = await import('/lazy-module.js'); lazyModule.default.doSomething(); });
在这个例子中，我们在用户点击按钮后，动态地载入 lazy-module.js 模块，并调用其中的 doSomething() 函数。
小结
PWA 应用需要支持按需加载，以提升用户体验并减轻服务器压力。我们可以利用 service worker、IntersectionObserver 和 import() 等方法实现按需加载。需要注意的是，按需加载会增加代码的复杂度，需要在实践中权衡是否需要使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca8bb1e46428fe9e2cffc9
