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 Optimization 整合到 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