diff --git a/.changeset/flat-clocks-listen.md b/.changeset/flat-clocks-listen.md new file mode 100644 index 000000000000..c7fe30360fa7 --- /dev/null +++ b/.changeset/flat-clocks-listen.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/adapter-vercel': minor +--- + +feat: expose vercel image optimization config in adapter config diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md index 4045a4d214f9..c1af70d58db2 100644 --- a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md +++ b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md @@ -18,7 +18,7 @@ import adapter from '@sveltejs/adapter-vercel'; export default { kit: { adapter: adapter({ - // see the 'Deployment configuration' section below + // see below for options that can be set here }) } }; @@ -64,6 +64,18 @@ And the following option apply to serverless functions: If your functions need to access data in a specific region, it's recommended that they be deployed in the same region (or close to it) for optimal performance. +## Image Optimization + +You may set the `images` config to control how Vercel builds your images. See the [image configuration reference](https://vercel.com/docs/build-output-api/v3/configuration#images) for full details. As an example, you may set: + +``` +{ + sizes: [640, 828, 1200, 1920, 3840], + formats: ['image/avif', 'image/webp'], + minimumCacheTTL: 300 +} +``` + ## Incremental Static Regeneration Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/concepts/incremental-static-regeneration/overview) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content. diff --git a/packages/adapter-vercel/index.d.ts b/packages/adapter-vercel/index.d.ts index 634f90ed8db9..d3cfe25a9396 100644 --- a/packages/adapter-vercel/index.d.ts +++ b/packages/adapter-vercel/index.d.ts @@ -28,6 +28,12 @@ export interface ServerlessConfig { * If `true`, this route will always be deployed as its own separate function */ split?: boolean; + + /** + * https://vercel.com/docs/build-output-api/v3/configuration#images + */ + images?: ImagesConfig; + /** * [Incremental Static Regeneration](https://vercel.com/docs/concepts/incremental-static-regeneration/overview) configuration. * Serverless only. @@ -53,6 +59,26 @@ export interface ServerlessConfig { | false; } +type ImageFormat = 'image/avif' | 'image/webp'; + +type RemotePattern = { + protocol?: 'http' | 'https'; + hostname: string; + port?: string; + pathname?: string; +}; + +type ImagesConfig = { + sizes: number[]; + domains: string[]; + remotePatterns?: RemotePattern[]; + minimumCacheTTL?: number; // seconds + formats?: ImageFormat[]; + dangerouslyAllowSVG?: boolean; + contentSecurityPolicy?: string; + contentDispositionType?: string; +}; + export interface EdgeConfig { /** * Whether to use [Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) or [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) diff --git a/packages/adapter-vercel/index.js b/packages/adapter-vercel/index.js index a46a953dd32f..6b38530a6370 100644 --- a/packages/adapter-vercel/index.js +++ b/packages/adapter-vercel/index.js @@ -55,7 +55,7 @@ const plugin = function (defaults = {}) { functions: `${dir}/functions` }; - const static_config = static_vercel_config(builder); + const static_config = static_vercel_config(builder, defaults); builder.log.minor('Generating serverless function...'); @@ -368,14 +368,20 @@ function write(file, data) { } // This function is duplicated in adapter-static -/** @param {import('@sveltejs/kit').Builder} builder */ -function static_vercel_config(builder) { +/** + * @param {import('@sveltejs/kit').Builder} builder + * @param {import('.').Config} config + */ +function static_vercel_config(builder, config) { /** @type {any[]} */ const prerendered_redirects = []; /** @type {Record} */ const overrides = {}; + /** @type {import('./index').ImagesConfig} */ + const images = config.images; + for (const [src, redirect] of builder.prerendered.redirects) { prerendered_redirects.push({ src, @@ -421,7 +427,8 @@ function static_vercel_config(builder) { handle: 'filesystem' } ], - overrides + overrides, + images }; }