在前端开发过程中，我们经常会需要使用一些 npm 包来帮助我们提高效率或者解决一些繁琐的问题。而今天，我要介绍的是一个非常实用的 npm 包：ember-service-worker-cache-rendered，该包可以让我们在使用 Ember.js 开发 web 应用时，更快地呈现已经渲染出来的页面。
这个包的基本原理很简单：当一个页面被访问时，它的 HTML 和相关的 JavaScript 和样式文件将被缓存。当下一次访问同样的页面时，它们将从缓存中提取而不是重新请求和渲染，这样就大大提高了页面加载的速度。
不过，在具体使用这个 npm 包之前，我们需要先了解一些基本的概念：
- Service Workers：这是一种特殊的 JavaScript 线程，可以在浏览器后台运行，管理缓存和推送通知。
- Cache API：这是一个用于检索和存储资源的 Web API，用于在 Service Worker 中管理缓存。
好了，现在让我们看看如何使用 ember-service-worker-cache-rendered 包来实现我们的需求。
安装
首先，我们需要使用 npm 来安装该包：
npm install ember-service-worker-cache-rendered
然后，在我们的 Ember.js 应用中创建一个新的 Service Worker：
ember generate service-worker
在这一步中，我们需要将该包的服务启用，并且在 config/environment.js 文件中加入如下代码：
-- -------------------- ---- -------
--------------------------- - -
-------- -----
--------------------- ---------
------------------ ---------
-------------- -
-------------------------------------
--
-------------------- ---
----------- -
---
-----------------
-
-这里需要注意的是，我们必须要将 cacheFirst 参数设置为我们需要缓存的路由，例如 'your/route/here'。
然后，在我们的 cacheFirst 路由中加入如下代码：
-- -------------------- ---- -------
------ - --- - ---- ----------------
------ - --- - ---- ----------------
------ ----- ---- -----------------------
------ - ------ -- ------- - ---- -----------------
------ ------- --------------
--------- ----------
------------ -
-- ---------- ----------------------- - ------- -
----- -- - --------- -----------------
----- ------- - --- ------------------------------
----- --- - ----------
------ ------------------- -- -
----------------------------- -- -
-- ----- -
------ -----------
-
------ ---------------------------- -- -
------ ------------------------- -- -
----- --------------- - -----------------
-- ------------ --- ---------- -
-- ----- --- ---- -------- --- --- ---- -- --- ----
------------------ -----------------
-------------------------------------------- --- ---------------------- - -------- - --------------- ----------- - ----
- ---- -
-- ----- --- --- ---- --- ---- -- -- --- ----
------------------ --- -------------- - ------- ---- ----------- ---- ------ ----
-
------ -----
---
---
---
------------ -- -
--------- ---- ------
---
-
---这里需要注意的是，我们需要通过 get(this, 'fastboot.isFastBoot') 判断当前是否是服务器端渲染（SSR），如果是的话就直接返回并让浏览器自行请求和渲染页面。
最后，在页面中使用如下代码即可实现缓存呈现：
{{#if my-page}}
<h1>{{my-page.title}}</h1>
{{my-page.body}}
{{else}}
// Show the regular page
{{/if}}是不是非常简单和实用呢？值得一提的是，这个包还提供了其他一些很有用的功能，例如 CacheFirst、NetworkFirst 和 StaleWhileRevalidate 等，大家可以根据自己的需求进行选择。
总之，如果你在使用 Ember.js 进行 web 应用开发时遇到了慢加载的问题，那么这个 npm 包一定可以帮助你更快地呈现已经渲染出来的页面，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ac981e8991b448d8629