企业官网建设流程全解析

使用 Build Output API 配置 Vercel Image Optimization 图像优化

【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples

导读

本文以 build-output-api/image-optimization 预构建示例为核心，讲解如何在不依赖 Next.js 等框架的情况下，仅通过.vercel/output目录结构与config.json中的images配置，直接启用 Vercel 平台的图像优化（Image Optimization）能力。读完本文，你将掌握 Build Output API v3 的项目组织方式、images配置项的含义、以及通过/_vercel/image/**端点按需缩放与转码图像的完整实战流程。

一、示例背景与部署方式

本示例属于仓库中 build-output-api 目录下的一组 "prebuilt"（预构建）示例之一。这类示例的特点是不依赖任何前端框架，直接提供一个符合 Build Output API 规范的文件结构，由 Vercel 平台按约定读取并托管。

部署方式非常简单，在示例目录内执行：

vercel deploy --prebuilt

该命令会读取.vercel/output目录中的产物，并按照 config.json 中的声明完成部署，无需经过框架构建阶段。

前提说明：vercelCLI 需要已安装并完成登录；--prebuilt标志告诉 Vercel 跳过构建流程，直接使用已有的预构建产物。

二、项目结构：.vercel/output 目录规范

Build Output API 的核心约定是：所有部署产物必须位于.vercel/output目录下。本示例的完整文件结构如下：

build-output-api/image-optimization/ ├── README.md └── .vercel/ └── output/ ├── config.json └── static/ ├── images/ │ └── rio.jpeg └── index.html

各部分职责：

• .vercel/output/config.json：构建输出配置，声明版本号、图像优化规则等平台级能力；
• .vercel/output/static/：静态文件目录，其中的文件会原样作为静态资源对外提供。本示例放置了未优化的原始图片 images/rio.jpeg 和一个测试页面 index.html。

关于静态目录的通用约定，可参考仓库中 static-files 示例，其static目录下同样直接放置index.html、another.html与data.json等静态资源。

三、config.json 中的 images 配置详解

本示例的核心配置位于 .vercel/output/config.json：

{ "version": 3, "images": { "sizes": [256, 384, 600, 1000], "domains": [], "minimumCacheTTL": 60, "formats": ["image/webp", "image/avif"] } }

各字段含义如下：

事实来源说明：以上字段与本仓库 config.json 的实际内容一致；字段语义与 Vercel Build Output API 文档中的images配置约定一致。

四、如何触发图像优化：/_vercel/image 端点

图像优化功能通过GET /_vercel/image/**端点对外提供服务。也就是说，只要部署了包含images配置的预构建项目，该端点就会自动生效，无需编写任何服务器代码。

示例页面 index.html 中即是这样引用图片的：

<h1>Vercel Image Optimization Example</h1> <h2>From my trip to Rio!</h2> <div> <img src="/_vercel/image?url=%2Fimages%2Frio.jpeg&w=1000&q=75" width="500" height="375" /> </div> <p> This image was uploaded to Vercel as a 3.9mb unoptimized image, but when served via Image Optimization it is resized and served with the optimal image format for your web browser, making it ~100kb. </p>

URL 参数说明：

• url：需要优化的图片路径。示例中%2Fimages%2Frio.jpeg是 URL 编码后的/images/rio.jpeg，对应 static/images/rio.jpeg；
• w：请求的输出宽度。示例请求w=1000，会被约束到配置中sizes白名单内最接近的值（此处恰好是 1000）；
• q：压缩质量，示例为75。

客户端实际效果：

1. 浏览器发起GET /_vercel/image?url=...&w=1000&q=75请求；
2. Vercel 平台读取原始图片，按请求宽度缩放，并依据浏览器Accept头协商输出webp/avif等格式；
3. 响应结果按minimumCacheTTL指定的时长在 CDN 缓存。

页面中的说明文字给出了直观的量级对比：原始rio.jpeg约 3.9MB，经优化后体积降至约 100KB（该数字为示例作者在页面中自述的演示结果，实际体积会随图片内容与参数变化）。

五、仓库中的佐证：静态文件目录的通用模式

本示例展示的模式与仓库中其他 Build Output API 示例保持一致的"预构建"风格。例如 static-files 示例的 config.json 仅声明{"version": 3}，其静态页面同样直接放在static目录下，通过 index.html 链接到another.html与data.json。

对比可见：

• 未开启图像优化时，config.json只需version字段；
• 需要图像优化时，追加images配置即可，静态资源目录结构保持不变。

这也说明 Build Output API 的核心思路是"声明式配置 + 约定目录"：平台能力通过配置开关启用，源码与构建流程完全解耦。

六、在线 Demo 与快速验证

示例 README 提供了在线演示地址：

https://build-output-api-image-optimization.vercel.sh

访问该地址后，浏览器会加载经过/_vercel/image端点优化的图片。你可以通过以下方式验证优化效果：

• 打开浏览器开发者工具的 Network 面板，观察图片请求的响应头中的Content-Type（应为image/webp或image/avif，取决于浏览器支持）与content-length（体积远小于原始文件）；
• 修改 URL 中的w与q参数，观察输出尺寸与体积变化；
• 检查响应缓存头，验证minimumCacheTTL（60 秒）是否生效。

说明：演示链接与示例 README 中提供的地址一致，实际可用性以部署状态为准；你也可以按照第一节的方式本地部署后自行验证。

七、小结

通过本示例可以掌握一条完整的"零框架图像优化"路径：

1. 在项目根目录创建.vercel/output目录结构；
2. 将原始静态图片放入.vercel/output/static/；
3. 在.vercel/output/config.json中声明version: 3与images配置；
4. 执行vercel deploy --prebuilt完成部署；
5. 在页面中以/_vercel/image?url=...&w=...&q=...形式引用图片，即可获得按需缩放、格式协商与 CDN 缓存。

该方案适合需要精确控制构建产物、或希望脱离框架绑定直接使用 Vercel 平台能力的场景，配置项全部集中在config.json中，便于审计与版本管理。

【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples