Node.js AMP Optimizer 指南

重要事項：本文件不適用於您目前選取的格式 電子郵件！

本指南說明如何設定及使用 Node.js 版本的 AMP Optimizer。

設定

使用 NPM 透過以下指令安裝

npm install @ampproject/toolbox-optimizer

使用方式

AMP Optimizer 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 Optimizer。以下範例說明如何整合到 Express.js 伺服器中。將 AMP Optimizer 整合到 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 Optimizer 時，請務必設定快取或 CDN，以避免呈現延遲。

設定

AMP Optimizer 提供合理的預設設定，在大多數情況下都能良好運作。但是，轉換可以針對特定用例進行自訂。您可以在此處找到所有可用選項的清單。

幾個值得注意的選項包括

lts: true 可為 AMP 執行階段和元件啟用長期穩定網址。
verbose: true 可用於詳細的偵錯輸出。特別適合用於找出 AMP 樣板無法移除的原因。
imageOptimizer：透過提供函式來計算指定圖片 src 的 srcset 網址，即可啟用自動產生圖片 srcset。此函式應傳回指向指定寬度 src 圖片版本的網址。如果沒有可用的圖片，則應傳回 falsy 值。詳情請參閱下一節。

圖片最佳化

AMP Optimizer 可以根據給定的 amp-img 的 layout 定義，產生 srcset 值。若要讓此功能運作，您需要提供一個函式，將圖片的 src 和 width 對應至調整大小後的 srcset 來源值。圖片大小調整並非由 AMP Optimizer 執行，而是需要在建置時期 (例如針對靜態網站) 或透過圖片託管服務 (例如 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 Optimizer 會轉換下列 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