Node.js AMP 优化器指南

本指南介绍了如何设置和使用 Node.js 版本的 AMP 优化器。

设置

通过 NPM 使用以下命令安装

npm install @ampproject/toolbox-optimizer

使用

AMP 优化器 API 接受 HTML 字符串作为输入，并返回 HTML 字符串的优化版本。基本用法如下所示

const AmpOptimizer = require('@ampproject/toolbox-optimizer');

// create the AMP Optimizer instance
const ampOptimizer = AmpOptimizer.create();

const html = '<h1>Hello World!</h1>';

const optimizedHtml = await ampOptimizer.transformHtml(html);

在构建时创建优化的 AMP

对于静态站点，最好在构建站点时优化 AMP 页面。以下是如何将其集成到基于 Gulp.js 的构建中的示例。此示例添加了一个自定义转换，用于优化 src 文件夹中的所有 HTML 文件

const {src, dest} = require('gulp');
const through2 = require('through2');

const AmpOptimizer = require('@ampproject/toolbox-optimizer');
const ampOptimizer = AmpOptimizer.create();

function build(cb) {
  return src('src/*.html')
    .pipe(
      through2.obj(async (file, _, cb) => {
        if (file.isBuffer()) {
          const optimizedHtml = await ampOptimizer.transformHtml(
            file.contents.toString()
          );
          file.contents = Buffer.from(optimizedHtml);
        }
        cb(null, file);
      })
    )
    .pipe(dest('dist/'));
}

exports.default = build;

渲染时

对于动态页面，通常需要在服务器上呈现页面。在这种情况下，您可以在呈现页面后运行 AMP 优化器。以下是集成到 Express.js 服务器中的示例。将 AMP 优化集成到 Express 路由器中的一种方法是在模板呈现后在回调中运行它

const express = require('express');
const router = express.Router();
const AmpOptimizer = require('@ampproject/toolbox-optimizer');
const ampOptimizer = AmpOptimizer.create();

router.get('/', (req, res) => {
  const locals = {title: 'Express with AMP Optimizer'};
  res.render('index', locals, async (err, html) => {
    const optimizedHtml = await ampOptimizer.transformHtml(html);
    res.send(optimizedHtml);
  });
});

module.exports = router;

在服务器上使用 AMP 优化器时，请确保设置缓存或 CDN 以避免渲染延迟。

配置

AMP 优化器提供了一个合理的默认配置，在大多数情况下应该可以正常工作。但是，可以针对特定用例自定义转换。您可以在此处找到所有可用选项的列表。

一些值得注意的选项是

lts: true 用于为 AMP 运行时和组件启用长期稳定 URL。
verbose: true 用于详细的调试输出。尤其适用于识别无法删除 AMP 样板的原因。
imageOptimizer: 通过为给定图像 src 提供一个用于计算 srcset URL 的函数，启用自动图像 srcset 生成。该函数应返回一个 URL，该 URL 指向具有给定宽度的 src 图像的版本。如果没有可用的图像，则应返回一个虚值。有关此内容的更多信息，请参阅下一节。

图像优化

AMP 优化器可以根据 amp-img 的 layout 定义生成其 srcset 值。要使其工作，您需要提供一个函数，该函数将图像的 src 和 width 映射到调整大小的 srcset 源值。图像调整大小不是由 AMP 优化器执行的，需要在构建时（例如，对于静态站点）或通过诸如 thumbor 之类的图像托管服务进行。

以下是将图像宽度附加到 src 的示例实现

const ampOptimizer = AmpOptimizer.create({
  // parameters are the amp-img `src` and the `width` of the to be generated srcset source value
  imageOptimizer: (src, width) => {
    // we cannot rename if the image does not have a file extension
    const index = src.lastIndexOf('.');
    if (index === -1) {
      // return null means we won't generate a srcset source value for this width
      return null;
    }
    const prefix = src.substring(0, index);
    const postfix = src.substring(index, src.length);
    return `${prefix}.${width}w${postfix}`;
  };
})

使用此实现，AMP 优化器将转换以下 amp-img 声明

<!-- Injects srcset for responsive layout -->
<amp-img
  src="image1.png"
  width="400"
  height="800"
  layout="responsive"
  alt="..."
></amp-img>
<!-- Ignores existing srcset -->
<amp-img
  layout="fill"
  alt="..."
  srcset="image-1x.png 1x, image-2x.png 2x"
></amp-img>

为

<!-- Injects srcset for responsive layout -->
<amp-img
  src="image1.png"
  width="400"
  height="800"
  layout="responsive"
  alt="..."
  srcset="image1.470w.png 470w, image1.820w.png 820w, image1.1440w.png 1440w"
></amp-img>
<!-- Ignores existing srcset -->
<amp-img
  layout="fill"
  alt="..."
  srcset="image-1x.png 1x, image-2x.png 2x"
></amp-img>

使用 layout=responsive 时，请使用 width 和 height 属性来指定最小图像尺寸。例如，对于移动设备上的全出血英雄图像，请将宽度指定为 width=320。

作者： @sebastianbenz