使用新的 AMP 优化器 2.0，创建 AMP 页面变得更加简单。
AMP 优化器的主要目标是通过应用额外的服务器端优化，使AMP 页面加载速度更快。通过此版本，AMP 优化器还使将 AMP 集成到框架和 CMS 中变得更加简单！例如，我们刚刚发布了用于出色的静态网站生成器Eleventy的AMP 插件，它利用了所有这些新功能。
但首先，让我们快速了解一下 AMP 优化器 2.0 中的新功能。
- 自动 AMP 组件脚本导入。
- 自动添加任何缺少的必需 AMP 标签。
- 通过 <img> 标签到 <amp-img> 转换，提供新的 Markdown 支持。
- 为内联 amp-scripts 生成 CSP 标签。
- 内置 HTML 压缩，删除不必要的空格（这包括 AMP 特定的优化，例如从内联 JSON 中删除空格，并使用terser 压缩内联 amp-scripts）。
- AMP 服务器端渲染 现在支持内在布局。这意味着 AMP 优化器可以删除使用内在布局的页面的 AMP 模板，从而实现更快的加载时间。
- 通过从 parse5 切换到 htmlparser2，转换速度提高了 40%！
现在，让我们谈谈前三个功能，以及它们如何简化 AMP 页面的构建以及将 AMP 集成到框架和 CMS 中。
自动 AMP 组件扩展导入
自动 AMP 组件导入意味着 AMP 优化器将分析 DOM 以查找任何使用的 AMP 组件，并自动将所有需要的脚本导入注入到头部。
例如，如果遇到以下标签
<amp-video src="video.mp4" width="300" height="200"></amp-video>Code language: HTML, XML (xml)它将自动添加 amp-video 脚本扩展导入
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>Code language: HTML, XML (xml)这也适用于不需要特定标签的 AMP 组件
<div amp-fx="fade-in">I will fade in</div>Code language: HTML, XML (xml)在这种情况下，amp-fx 属性的存在将触发 amp-fx-collection 脚本的导入
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>Code language: HTML, XML (xml)这非常棒，因为现在许多 AMP 功能使用起来非常简单，不再需要您访问 AMP 文档并复制/粘贴脚本导入。我们预计，一旦此功能被广泛采用，amp.dev 的流量将大幅下降！
自动添加任何缺少的必需 AMP 标签。
AMP 优化器如何改善开发人员体验的另一个关键是能够添加任何缺少的必需 AMP 标签。例如，给定以下 HTML 片段
<html>
<head>
<title>My Page</title>
<link rel="canonical" href="/mypage.html" />
</head>
<body>
<h1>Hello World!</h1>
</body>Code language: HTML, XML (xml)AMP 优化器将自动添加将此转换为有效 AMP 页面所需的所有必需标签和属性
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My Page</title>
<link rel="canonical" href="/mypage.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>...</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Code language: HTML, XML (xml)这意味着，使用 AMP 优化器时，您无需在布局模板中包含任何 AMP 特定的标记。与自动组件导入相结合，创建 AMP 页面变得像使用内置 HTML 标签一样简单。
努力改善框架和 CMS 的 AMP 支持
此 AMP 优化器版本是为框架和 CMS 平台提供更好的 AMP 支持的第一步。
Next.js 已经提供了出色的 AMP 支持，并且已经内置了 AMP 优化器。这意味着，使用此 AMP 优化器版本（在Next.js v9.2.2 中可用），在 Next.js 中创建 AMP 页面变得更加容易。您现在可以直接使用 AMP 组件（在本例中为 amp-fx-collection）
export const config = {amp: true};
export default () => (
<div amp-fx='fade-in'>I will fade-in</div>
);Code language: JavaScript (javascript)无需通过 <Head> 显式导入 amp-fx-collection-.0.1.js 组件脚本
import Head from 'next/head'
export const config = {amp: true};
export default () => (
<>
<Head>
<script
async
key="amp-fx-collection"
custom-element="amp-fx-collection"
src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"
/>
);Code language: JavaScript (javascript)Markdown 支持
此 AMP 优化器版本添加了一个新的 markdown 模式，该模式将 <img> 标签转换为 <amp-img> 或 <amp-anim> 标签（所有其他 Markdown 功能已由 AMP 支持）。
这将启用以下转换流程
README.md => HTML => AMP Optimizer => valid AMPCode language: PHP (php)结合自动 AMP 组件脚本导入和自动添加缺少的必需 AMP 标签，现在可以直接将 markdown 转换为有效的 AMP
const AmpOptimizer = require('@ampproject/toolbox-optimizer');
const md = require('markdown-it')({
// don't sanitize html if you want to support AMP components in Markdown
html: true,
});
// enable markdown mode
const ampOptimizer = AmpOptimizer.create({
markdown: true,
});
const markdown = `
# Markdown 🤯
Here is an image declared in Markdown syntax:
.
You can directly declare AMP components:
<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="1182321926473162752">
</amp-twitter>
Any missing extensions will be automatically imported.
`;
const html = md.render(markdown);
// valid AMP!
const amphtml = await ampOptimizer.transformHtml(html, {
canonical: filePath,
});Code language: PHP (php)总结
每个发布 AMP 页面的网站都应该使用 AMP 优化器，以从性能改进中获益，渲染时间最多可缩短 50%。最棒的是：随着每个新发布的服务器端优化，性能会随着时间的推移自动提高。
此版本引入的新功能极大地改善了 AMP 开发人员体验。使用 AMP 组件变得像使用任何其他 HTML 标签一样简单。但这仅仅是第一步，我们计划在未来在此基础上进行构建，并将 AMP 支持引入更多框架和 CMS。请继续关注 AMP 博客，并在 Twitter 上关注@AMPhtml，以获取有关 AMP 优化器的任何未来新闻。
作者：Sebastian Benz，开发人员 项目工程师，AMP 项目，Google