什么是 ember-cli-critical
ember-cli-critical 是一个基于 Ember.js 的 npm 包，提供了一种简单而可靠的方式，用于生成网站的关键渲染路径（critical rendering path）。该包通过在网站的关键路径上提供所需的 CSS 和 JavaScript，从而加速页面加载时间并提高用户体验。
安装 ember-cli-critical
要安装 ember-cli-critical，您需要先安装 Node.js 和 Ember CLI，然后执行以下命令：
npm install --save-dev ember-cli-critical
使用 ember-cli-critical
使用 ember-cli-critical 非常简单。第一步是检查您的应用程序是否支持 ember-cli-critical。要检查您的应用程序是否支持 ember-cli-critical，请打开终端窗口并导航到应用程序目录。
接下来，您需要为您的应用程序生成一个关键渲染路径。要创建关键渲染路径，请运行以下命令：
ember generate critical
该命令将创建一个名为 critical-config.js 的文件，其中包含一些默认设置。您可以根据需要编辑此文件，以满足您的特定要求。
最后，你需要运行以下命令来生成你的关键渲染路径：
ember critical
ember-cli-critical 示例代码
以下是一个简单的 Ember.js 应用程序，并且它使用了 ember-cli-critical。在此示例中，我们使用了一个名为 my-app 的应用程序。您可以根据需要编辑代码。
-- -------------------- ---- -------
-- ----------------------
-------------- - -
----- -
----
---------
------------
------------
----------
--
-------- -
------- -----
----- ------------------------
------- -----
---- -
--------------------
--
------ -----
------- ----
----- ------------------
-
--- -------------------- ---- ------- -- ------------- ------ ----------- ---- ------------------------ ------ ------ ---- ----------------------- ----- ------ - -------------------- --------- -------------------- -------- -------------- --- --------------------- - -------------------- ----------------------- ----------------------- ---------------------- --- ------ ------- -------
// app/templates/application.hbs
{{outlet}}// app/templates/about.hbs <h1>About us</h1> <p>We are the best</p>
// app/templates/products.hbs <h1>Our products</h1> <ul> <li>Product 1</li> <li>Product 2</li> <li>Product 3</li> </ul>
// app/templates/services.hbs <h1>Our services</h1> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul>
-- -------------------- ---- -------
-- -------------------------
----------- -------
------
-----
------ -----------------------
------ ----------- ----------
------
-----
------ -------------------------
------ ------------ -----------
------
-----
------ -----------------------------
--------- ------------------------
------
------- ---------------------------
-------通过使用 ember-cli-critical，您可以轻松地为您的应用程序创建关键渲染路径，并使网站更快。这可以提高用户体验，并有助于改善搜索引擎排名。如果您还没有使用 ember-cli-critical，请尝试并享受它的好处！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e181e8991b448e064b