diff --git a/docs/config/index.md b/docs/config/index.md index 233e08b8f864e3..1ba2d21e2d2c6f 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -711,9 +711,14 @@ export default defineConfig({ Imported or referenced assets that are smaller than this threshold will be inlined as base64 URLs to avoid extra http requests. Set to `0` to disable inlining altogether. ::: tip Note - If you specify `build.lib`, `build.assetsInlineLimit` will be ignored and assets will always be inlined, regardless of file size. + If you specify `build.lib` or `build.assetsInlineExclude` , `build.assetsInlineLimit`will be ignored and assets will always be inlined, regardless of file size. ::: +### build.assetsInlineExclude + +- **Type:** `string | RegExp | (string | RegExp)[]` +- **Default:** `[]` + ### build.cssCodeSplit - **Type:** `boolean` diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index b9936f8583b46c..8b5732b9001004 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -98,6 +98,11 @@ export interface BuildOptions { * @default 4096 */ assetsInlineLimit?: number + /** + * Exclude paths that are less than the limit but do not want to be included + * @default [] + */ + assetsInlineExclude?: string | RegExp | (string | RegExp)[] /** * Whether to code-split CSS. When enabled, CSS in async chunks will be * inlined as strings in the chunk and inserted via dynamically created @@ -243,6 +248,7 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions { outDir: 'dist', assetsDir: 'assets', assetsInlineLimit: 4096, + assetsInlineExclude: [], cssCodeSplit: !raw?.lib, cssTarget: false, sourcemap: false, diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index 7ec3a01543f9a4..10051eadd5210c 100644 --- a/packages/vite/src/node/plugins/asset.ts +++ b/packages/vite/src/node/plugins/asset.ts @@ -10,6 +10,7 @@ import type { OutputOptions, PluginContext, RenderedChunk } from 'rollup' import MagicString from 'magic-string' import { createHash } from 'crypto' import { normalizePath } from '../utils' +import { createFilter } from '@rollup/pluginutils' export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g @@ -287,11 +288,15 @@ async function fileToBuiltUrl( const file = cleanUrl(id) const content = await fsp.readFile(file) + const assetsFilter = config.build.assetsInlineExclude + ? createFilter(config.build.assetsInlineExclude) + : () => false let url: string if ( config.build.lib || (!file.endsWith('.svg') && + !assetsFilter(file) && content.length < Number(config.build.assetsInlineLimit)) ) { // base64 inlined as a string