Add multiple cdn v2

.changeset/fluffy-readers-add.md

@@ -0,0 +1,6 @@
+---
+"@astrojs/internal-helpers": minor
+"astro": minor
+---
+
+Adds the option to pass an object to `build.assetsPrefix`. This allows for the use of multiple CDN prefixes based on the target filetype.

packages/astro/src/@types/astro.ts

@@ -13,7 +13,7 @@ import type * as babel from '@babel/core';
 import type * as rollup from 'rollup';
 import type * as vite from 'vite';
 import type { RemotePattern } from '../assets/utils/remotePattern.js';
-import type { SerializedSSRManifest } from '../core/app/types.js';
+import type { SerializedSSRManifest, AssetsPrefix } from '../core/app/types.js';
 import type { PageBuildData } from '../core/build/types.js';
 import type { AstroConfigType } from '../core/config/index.js';
 import type { AstroTimer } from '../core/config/timer.js';
@@ -67,7 +67,7 @@ export type {
 	UnresolvedImageTransform,
 } from '../assets/types.js';
 export type { RemotePattern } from '../assets/utils/remotePattern.js';
-export type { SSRManifest } from '../core/app/types.js';
+export type { SSRManifest, AssetsPrefix } from '../core/app/types.js';
 export type {
 	AstroCookieGetOptions,
 	AstroCookieSetOptions,
@@ -881,11 +881,13 @@ export interface AstroUserConfig {
 		/**
 		 * @docs
 		 * @name build.assetsPrefix
-		 * @type {string}
+		 * @type {string | Record<string, string>}
 		 * @default `undefined`
 		 * @version 2.2.0
 		 * @description
 		 * Specifies the prefix for Astro-generated asset links. This can be used if assets are served from a different domain than the current site.
+		 * 
+		 * If this value is a `string`,
 		 *
 		 * For example, if this is set to `https://cdn.example.com`, assets will be fetched from `https://cdn.example.com/_astro/...` (regardless of the `base` option).
 		 * You would need to upload the files in `./dist/_astro/` to `https://cdn.example.com/_astro/` to serve the assets.
@@ -899,8 +901,29 @@ export interface AstroUserConfig {
 		 *   }
 		 * }
 		 * ```
+		 * 
+		 * If this value is a `Record<string, string>`,
+		 * 
+		 * Applicable to multiple CDN scenarios. If you static file use different CDN, you can configure it like the example below.
+		 * 
+		 * For example, if static file is js file, assets prefix use `https://js.cdn.example.com`. If static file is css file, assets prefix use `https://css.cdn.example.com`. Other assets prefix use `https://cdn.example.com`.
+		 * 
+		 * ```js
+		 * {
+		 *   build: {
+		 *     assetsPrefix: {
+		 *       'js': 'https://js.cdn.example.com',
+		 *       'css': 'https://js.cdn.example.com',
+		 *       'defaultAssetsPrefix': 'https://cdn.example.com'
+		 *     }
+		 *   }
+		 * }
+		 * ```
+		 * 
+		 * Object key is file extension, value is CDN assets prefix path. `defaultAssetsPrefix` is default assets prefix cdn value set. You can set the default values of other files by setting the value of `defaultAssetsPrefix`. If `defaultAssetsPrefix` is not set, when the file extension is not found in the `assetsPrefix` object, it will be set to the empty string `''` by default.
+		 * 
 		 */
-		assetsPrefix?: string;
+		assetsPrefix?: AssetsPrefix;
 		/**
 		 * @docs
 		 * @name build.serverEntry

packages/astro/src/assets/utils/transformToPath.ts

@@ -4,6 +4,7 @@ import { removeQueryString } from '../../core/path.js';
 import { shorthash } from '../../runtime/server/shorthash.js';
 import type { ImageTransform } from '../types.js';
 import { isESMImportedImage } from './imageKind.js';
+import type { AssetsPrefix } from '../../@types/astro.js';
 
 export function propsToFilename(transform: ImageTransform, hash: string) {
 	let filename = removeQueryString(
@@ -33,3 +34,15 @@ export function hashTransform(
 	);
 	return shorthash(deterministicString(hashFields));
 }
+
+export function getAssetsPrefix(fileType: string, assetsPrefix?: AssetsPrefix):string {
+	if (!assetsPrefix) return '';
+	if (typeof assetsPrefix === 'string') return assetsPrefix;
+	fileType = fileType[0] === '.' ? fileType.slice(1) : fileType;
+	if (assetsPrefix[fileType]) {
+		return assetsPrefix[fileType];
+	} else if (assetsPrefix.defaultAssetsPrefix) {
+		return assetsPrefix.defaultAssetsPrefix;
+	}
+	return '';
+}

packages/astro/src/assets/vite-plugin-assets.ts

@@ -1,6 +1,7 @@
 import MagicString from 'magic-string';
 import type * as vite from 'vite';
 import { normalizePath } from 'vite';
+import { extname } from 'node:path';
 import type { AstroPluginOptions, ImageTransform } from '../@types/astro.js';
 import { extendManualChunks } from '../core/build/plugins/util.js';
 import { AstroError, AstroErrorData } from '../core/errors/index.js';
@@ -15,7 +16,7 @@ import { VALID_INPUT_FORMATS, VIRTUAL_MODULE_ID, VIRTUAL_SERVICE_ID } from './co
 import { emitESMImage } from './utils/emitAsset.js';
 import { isESMImportedImage } from './utils/imageKind.js';
 import { getProxyCode } from './utils/proxy.js';
-import { hashTransform, propsToFilename } from './utils/transformToPath.js';
+import { getAssetsPrefix, hashTransform, propsToFilename } from './utils/transformToPath.js';
 
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
@@ -95,9 +96,10 @@ export default function assets({
 					}
 
 					// Rollup will copy the file to the output directory, this refer to this final path, not to the original path
-					const finalOriginalImagePath = (
-						isESMImportedImage(options.src) ? options.src.src : options.src
-					).replace(settings.config.build.assetsPrefix || '', '');
+					const ESMImportedImageSrc = isESMImportedImage(options.src) ? options.src.src : options.src;
+					const fileExtension = extname(ESMImportedImageSrc);
+					const pf = getAssetsPrefix(fileExtension, settings.config.build.assetsPrefix);
+					const finalOriginalImagePath = ESMImportedImageSrc.replace(pf, '');
 
 					const hash = hashTransform(
 						options,
@@ -132,7 +134,7 @@ export default function assets({
 					// The paths here are used for URLs, so we need to make sure they have the proper format for an URL
 					// (leading slash, prefixed with the base / assets prefix, encoded, etc)
 					if (settings.config.build.assetsPrefix) {
-						return encodeURI(joinPaths(settings.config.build.assetsPrefix, finalFilePath));
+						return encodeURI(joinPaths(pf, finalFilePath));
 					} else {
 						return encodeURI(prependForwardSlash(joinPaths(settings.config.base, finalFilePath)));
 					}
@@ -149,8 +151,10 @@ export default function assets({
 					const [full, hash, postfix = ''] = match;
 
 					const file = this.getFileName(hash);
-					const prefix = settings.config.build.assetsPrefix
-						? appendForwardSlash(settings.config.build.assetsPrefix)
+					const fileExtension = extname(file)
+					const pf = getAssetsPrefix(fileExtension, settings.config.build.assetsPrefix)
+					const prefix = pf
+						? appendForwardSlash(pf)
 						: resolvedConfig.base;
 					const outputFilepath = prefix + normalizePath(file + postfix);
 

packages/astro/src/content/vite-plugin-content-assets.ts

@@ -19,6 +19,7 @@ import {
 	STYLES_PLACEHOLDER,
 } from './consts.js';
 import { hasContentFlag } from './utils.js';
+import { getAssetsPrefix } from '../assets/utils/transformToPath.js';
 
 export function astroContentAssetPropagationPlugin({
 	mode,
@@ -141,8 +142,11 @@ export function astroConfigBuildPlugin(
 			'build:post': ({ ssrOutputs, clientOutputs, mutate }) => {
 				const outputs = ssrOutputs.flatMap((o) => o.output);
 				const prependBase = (src: string) => {
-					if (options.settings.config.build.assetsPrefix) {
-						return joinPaths(options.settings.config.build.assetsPrefix, src);
+					const { assetsPrefix } = options.settings.config.build
+					if (assetsPrefix) {
+						const fileExtension = extname(src)
+						const pf = getAssetsPrefix(fileExtension, assetsPrefix)
+						return joinPaths(pf, src);
 					} else {
 						return prependForwardSlash(joinPaths(options.settings.config.base, src));
 					}

packages/astro/src/core/app/types.ts

@@ -35,6 +35,8 @@ export type SerializedRouteInfo = Omit<RouteInfo, 'routeData'> & {
 
 export type ImportComponentInstance = () => Promise<SinglePageBuiltModule>;
 
+export type AssetsPrefix = string | Record<string, string>
+
 export type SSRManifest = {
 	adapterName: string;
 	routes: RouteInfo[];
@@ -43,7 +45,7 @@ export type SSRManifest = {
 	trailingSlash: 'always' | 'never' | 'ignore';
 	buildFormat: 'file' | 'directory' | 'preserve';
 	compressHTML: boolean;
-	assetsPrefix?: string;
+	assetsPrefix?: AssetsPrefix;
 	renderers: SSRLoadedRenderer[];
 	/**
 	 * Map of directive name (e.g. `load`) to the directive script code

packages/astro/src/core/build/plugins/plugin-manifest.ts

@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url';
+import { extname } from 'node:path';
 import glob from 'fast-glob';
 import type { OutputChunk } from 'rollup';
 import { type Plugin as VitePlugin } from 'vite';
@@ -18,6 +19,7 @@ import { getOutFile, getOutFolder } from '../common.js';
 import { type BuildInternals, cssOrder, mergeInlineCss } from '../internal.js';
 import type { AstroBuildPlugin } from '../plugin.js';
 import type { StaticBuildOptions } from '../types.js';
+import { getAssetsPrefix } from '../../../assets/utils/transformToPath.js';
 
 const manifestReplace = '@@ASTRO_MANIFEST_REPLACE@@';
 const replaceExp = new RegExp(`['"]${manifestReplace}['"]`, 'g');
@@ -163,7 +165,9 @@ function buildManifest(
 
 	const prefixAssetPath = (pth: string) => {
 		if (settings.config.build.assetsPrefix) {
-			return joinPaths(settings.config.build.assetsPrefix, pth);
+			const fileType = extname(pth)
+			const pf = getAssetsPrefix(fileType, settings.config.build.assetsPrefix)
+			return joinPaths(pf, pth);
 		} else {
 			return prependForwardSlash(joinPaths(settings.config.base, pth));
 		}

packages/astro/src/core/config/schema.ts

@@ -133,7 +133,7 @@ export const AstroConfigSchema = z.object({
 				.default(ASTRO_CONFIG_DEFAULTS.build.server)
 				.transform((val) => new URL(val)),
 			assets: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.assets),
-			assetsPrefix: z.string().optional(),
+			assetsPrefix: z.string().optional().or(z.record(z.string()).optional()),
 			serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
 			redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
 			inlineStylesheets: z
@@ -508,7 +508,7 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: string) {
 					.default(ASTRO_CONFIG_DEFAULTS.build.server)
 					.transform((val) => resolveDirAsUrl(val, fileProtocolRoot)),
 				assets: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.assets),
-				assetsPrefix: z.string().optional(),
+				assetsPrefix: z.string().optional().or(z.record(z.string()).optional()),
 				serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
 				redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
 				inlineStylesheets: z

packages/astro/src/core/create-vite.ts

@@ -35,6 +35,8 @@ import type { Logger } from './logger/core.js';
 import { createViteLogger } from './logger/vite.js';
 import { vitePluginMiddleware } from './middleware/vite-plugin.js';
 import { joinPaths } from './path.js';
+import { getAssetsPrefix } from '../assets/utils/transformToPath.js';
+import { isObject } from './util.js';
 
 interface CreateViteOptions {
 	settings: AstroSettings;
@@ -214,9 +216,9 @@ export async function createVite(
 	const assetsPrefix = settings.config.build.assetsPrefix;
 	if (assetsPrefix) {
 		commonConfig.experimental = {
-			renderBuiltUrl(filename, { type }) {
+			renderBuiltUrl(filename, { type, hostType }) {
 				if (type === 'asset') {
-					return joinPaths(assetsPrefix, filename);
+					return joinPaths(getAssetsPrefix(hostType, assetsPrefix), filename);
 				}
 			},
 		};
@@ -318,6 +320,6 @@ function isCommonNotAstro(dep: string): boolean {
 	);
 }
 
-function stringifyForDefine(value: string | undefined): string {
-	return typeof value === 'string' ? JSON.stringify(value) : 'undefined';
+function stringifyForDefine(value: string | undefined | object): string {
+	return (typeof value === "string" || isObject(value)) ? JSON.stringify(value) : "undefined";
 }

packages/astro/src/core/render/ssr-element.ts

@@ -1,10 +1,14 @@
-import type { SSRElement } from '../../@types/astro.js';
+import { extname } from 'node:path';
+import type { SSRElement, AssetsPrefix } from '../../@types/astro.js';
 import { joinPaths, prependForwardSlash, slash } from '../../core/path.js';
 import type { StylesheetAsset } from '../app/types.js';
+import { getAssetsPrefix } from '../../assets/utils/transformToPath.js';
 
-export function createAssetLink(href: string, base?: string, assetsPrefix?: string): string {
+export function createAssetLink(href: string, base?: string, assetsPrefix?: AssetsPrefix): string {
 	if (assetsPrefix) {
-		return joinPaths(assetsPrefix, slash(href));
+		const fileType = extname(href)
+		const pf = getAssetsPrefix(fileType, assetsPrefix)
+		return joinPaths(pf, slash(href));
 	} else if (base) {
 		return prependForwardSlash(joinPaths(base, slash(href)));
 	} else {
@@ -15,7 +19,7 @@ export function createAssetLink(href: string, base?: string, assetsPrefix?: stri
 export function createStylesheetElement(
 	stylesheet: StylesheetAsset,
 	base?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): SSRElement {
 	if (stylesheet.type === 'inline') {
 		return {
@@ -36,15 +40,15 @@ export function createStylesheetElement(
 export function createStylesheetElementSet(
 	stylesheets: StylesheetAsset[],
 	base?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): Set<SSRElement> {
 	return new Set(stylesheets.map((s) => createStylesheetElement(s, base, assetsPrefix)));
 }
 
 export function createModuleScriptElement(
 	script: { type: 'inline' | 'external'; value: string },
 	base?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): SSRElement {
 	if (script.type === 'external') {
 		return createModuleScriptElementWithSrc(script.value, base, assetsPrefix);
@@ -61,7 +65,7 @@ export function createModuleScriptElement(
 export function createModuleScriptElementWithSrc(
 	src: string,
 	base?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): SSRElement {
 	return {
 		props: {
@@ -75,7 +79,7 @@ export function createModuleScriptElementWithSrc(
 export function createModuleScriptElementWithSrcSet(
 	srces: string[],
 	site?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): Set<SSRElement> {
 	return new Set<SSRElement>(
 		srces.map((src) => createModuleScriptElementWithSrc(src, site, assetsPrefix))
@@ -85,7 +89,7 @@ export function createModuleScriptElementWithSrcSet(
 export function createModuleScriptsSet(
 	scripts: { type: 'inline' | 'external'; value: string }[],
 	base?: string,
-	assetsPrefix?: string
+	assetsPrefix?: AssetsPrefix
 ): Set<SSRElement> {
 	return new Set<SSRElement>(
 		scripts.map((script) => createModuleScriptElement(script, base, assetsPrefix))