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