AMP 只加载必要的脚本

Question

我有一个 AMP 页面模板文件，我在其中加载了几个 amp 功能：

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

我只想加载必要的脚本。当我浏览网页时，我发现这是一项请求的功能，但尚未实现：https://github.com/ampproject/amphtml/issues/9712

我的想法是检查文档的 body 中是否存在某个标记，如果存在，则加载脚本。例如：

document.addEventListener("DOMContentLoaded", function(event) {
        var list = document.getElementsByTagName("amp-youtube");
        //if list is not empty, create a script tag having the corresponding 
        //src and append it to the body
    });

但是，这会在 body 的末尾添加标签，我不知道这样是否可以（我在网上看到的所有地方，脚本标签都加载在 header).我是 AMP 页面的初学者，所以我的问题是：这是解决我的问题的好方法吗？如果不是，我该如何实现所需的功能？

Answer 1

如果我理解你的问题是正确的，你想要的是让你的页面在不同的路径上加载不同的脚本集。你是对的，目前没有办法做到这一点 AFAIK。

我的做法是使用模板引擎（服务器端的 React 或我正在使用的 pug）。现在，您可以使用相应的模板系统获得基于路由的 headers。

希望对您有所帮助！如果这不能回答您的问题，请返回。

Answer 2

据我所知，目前还没有实现嵌入式方法来实现您的要求，因此您只能使用模板引擎功能来实现您的目标。但无论如何，在 AMP 页面中添加您自己的脚本是一种糟糕的方法，因为它会导致您的页面无效并且永远不会被 AMP 缓存。

Answer 3

您可能正在使用某种 SSG（静态站点生成器）框架。像 Jekyll、Hugo 等。在那种情况下，您掌握了哪些页面需要某些标签而哪些不需要的信息。因此，您可以使用 SSG 的插值语言来选择性地包含您实际需要的那些脚本。

示例：我正在使用 Jekyll，并且在我的网站上只有博客 post 有 Disqus 评论部分。关于和其他页面没有评论。在我的例子中，Disqus 评论是唯一需要 amp-iframe 的功能。我所做的是在每个论坛 post markdown 文件中我添加了一个额外的 comments: true 条目进入前端问题：

---
...
comments: true
---

我在 _includes 中只有一个 head.html，在那个文件中，我有这个：

{% if page.comments %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous">
{% endif %}
{% if page.has_carousel %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous">
{% endif %}

...

{% if page.comments %}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous"></script>
{% endif %}
{% if page.has_carousel %}
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous"></script>
{% endif %}

在这里您还可以看到只有某些页面有轮播。使用这种技术，Liquid 插值会在不需要时忽略这些脚本，因此 AMP 验证器不会抱怨。但不管怎样，这对提高效率很有帮助。

自 2019 年 4 月以来，可能会有一些自定义 JavaScript，但 JS 有局限性。正如我提到的恕我直言，最好优化您的网站生成。您可能拥有执行此操作所需的所有信息。如果是带有 AMP 插件的 Wordpress 网站，那就另当别论了。

AMP 只加载必要的脚本

AMP Load only the necessary scripts

javascript

loading

amp-html

accelerated-mobile-page