如何将 js 脚本传递给特定的页面类型？答案

【问题标题】：How to pass js scripts to specific page type?如何将 js 脚本传递给特定的页面类型？
【发布时间】：2017-11-14 02:53:52
【问题描述】：

目前我在 site.js 中有所有页面脚本，并通过撇号资产传递它，如下所示：

module.exports = {
  stylesheets: [...],
  scripts: [
    {
      name: 'site'
    }
]

如何将一些服务器/客户端 js 代码传递给特定的页面类型？

【问题讨论】：

标签： apostrophe-cms

【解决方案1】：

目前 Apostrophe 没有专门提供一种方法来执行此操作。令人惊讶的是，将脚本标记添加到页面模板并不是一个糟糕的主意。您可以通过覆盖页面模板中的 extraBody nunjucks 块在 body 标记的末尾加载它：

{% block extraBody %}
  <script src="/modules/my-module/js/special-page.js"></script>
{% endblock %}

由于 Apostrophe 为每个模块的资产提供符号链接的方式，此路径将在此处找到文件：

lib/modules/my-module/js/special-page.js

这并不可怕的原因是：您推送到 Apostrophe 的 .js 资产被缩小并在每个页面上一起发送......这意味着浏览器会缓存它们。但是，如果每种页面类型都有单独的资产“场景”，那么将它们全部缩小在一起将需要为每种页面类型提供一个单独的缩小后的“大胖 .js 文件”，并且在不同类型的页面之间移动时不会有缓存优势.

因此，允许 Apostrophe 缩小您总是/几乎总是使用的东西，并单独发送您很少使用的东西，结果证明在很多时候都是一种胜利。您从缓存中保留通用内容，并为特定页面类型获取少量自定义内容。

当然，如果您编写这样的脚本标签，撇号不会为您缩小 .js 文件。您可以通过使用自己的 gulp 工作流程来构建 .js 文件来解决这个问题，如果您渴望跨浏览器使用 ES6 功能，这对于项目特定代码来说并不少见。

另见：

Incorporating gulp to compile js in apostrophe?

但是考虑一下...一旦您意识到用户将在一次站点访问中访问多种类型的页面，那么决定您应该将它们全部放在一起并让 Apostrophe 将它们一起缩小并不是一个很大的步骤。例外情况应该是当一种页面类型的特殊负载非常非常大并且用户在大多数站点访问中可能不会访问该页面时。在这种极端情况下，众所周知，我们也遵循这种技术。 Apostrophe 本身依赖 ckeditor 的动态加载器来避免在每次登录时推送所有 ckeditor 富文本编辑器代码。

【讨论】：