feat: build.assetsInlineLimit callback

docs/config/build-options.md

@@ -82,11 +82,13 @@ Specify the directory to nest generated assets under (relative to `build.outDir`
 
 ## build.assetsInlineLimit
 
-- **Type:** `number`
+- **Type:** `number` | `((filePath: string, content: Buffer) => boolean | undefined)`
 - **Default:** `4096` (4 KiB)
 
 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.
 
+If a callback is passed, a boolean can be returned to opt-in or opt-out. If nothing is returned the default logic applies.
+
 Git LFS placeholders are automatically excluded from inlining because they do not contain the content of the file they represent.
 
 ::: tip Note

packages/vite/src/node/build.ts

@@ -100,7 +100,9 @@ export interface BuildOptions {
    * base64 strings. Default limit is `4096` (4 KiB). Set to `0` to disable.
    * @default 4096
    */
-  assetsInlineLimit?: number
+  assetsInlineLimit?:
+    | number
+    | ((filePath: string, content: Buffer) => boolean | undefined)
   /**
    * Whether to code-split CSS. When enabled, CSS in async chunks will be
    * inlined as strings in the chunk and inserted via dynamically created

packages/vite/src/node/plugins/asset.ts

@@ -344,18 +344,25 @@ async function fileToBuiltUrl(
   const file = cleanUrl(id)
   const content = await fsp.readFile(file)
 
-  if (shouldInline == null) {
-    shouldInline =
-      !!config.build.lib ||
-      // Don't inline SVG with fragments, as they are meant to be reused
-      (!(file.endsWith('.svg') && id.includes('#')) &&
-        !file.endsWith('.html') &&
-        content.length < Number(config.build.assetsInlineLimit) &&
-        !isGitLfsPlaceholder(content))
-  }
+  const finalShouldInline = (() => {
+    if (config.build.lib) return true
+    let limit: number
+    if (typeof config.build.assetsInlineLimit === 'function') {
+      const userShouldInline = config.build.assetsInlineLimit(file, content)
+      if (userShouldInline != null) return userShouldInline
+      limit = 4096
+    } else {
+      limit = Number(config.build.assetsInlineLimit)
+    }
+    if (shouldInline != null) return shouldInline
+    if (file.endsWith('.html')) return false
+    // Don't inline SVG with fragments, as they are meant to be reused
+    if (file.endsWith('.svg') && id.includes('#')) return false
+    return content.length < limit && !isGitLfsPlaceholder(content)
+  })()
 
   let url: string
-  if (shouldInline) {
+  if (finalShouldInline) {
     if (config.build.lib && isGitLfsPlaceholder(content)) {
       config.logger.warn(
         colors.yellow(`Inlined file ${id} was not downloaded via Git LFS`),

playground/worker/vite.config-es.js

@@ -21,7 +21,8 @@ export default defineConfig({
   },
   build: {
     outDir: 'dist/es',
-    assetsInlineLimit: 100, // keep SVG as assets URL
+    assetsInlineLimit: (filePath) =>
+      filePath.endsWith('.svg') ? false : undefined,
     rollupOptions: {
       output: {
         assetFileNames: 'assets/[name].[ext]',

playground/worker/vite.config-iife.js

@@ -22,7 +22,8 @@ export default defineConfig({
   },
   build: {
     outDir: 'dist/iife',
-    assetsInlineLimit: 100, // keep SVG as assets URL
+    assetsInlineLimit: (filePath) =>
+      filePath.endsWith('.svg') ? false : undefined,
     manifest: true,
     rollupOptions: {
       output: {

playground/worker/vite.config-relative-base-iife.js

@@ -21,7 +21,8 @@ export default defineConfig(({ isPreview }) => ({
   },
   build: {
     outDir: 'dist/relative-base-iife',
-    assetsInlineLimit: 100, // keep SVG as assets URL
+    assetsInlineLimit: (filePath) =>
+      filePath.endsWith('.svg') ? false : undefined,
     rollupOptions: {
       output: {
         assetFileNames: 'other-assets/[name]-[hash].[ext]',

playground/worker/vite.config-relative-base.js

@@ -21,7 +21,8 @@ export default defineConfig(({ isPreview }) => ({
   },
   build: {
     outDir: 'dist/relative-base',
-    assetsInlineLimit: 100, // keep SVG as assets URL
+    assetsInlineLimit: (filePath) =>
+      filePath.endsWith('.svg') ? false : undefined,
     rollupOptions: {
       output: {
         assetFileNames: 'other-assets/[name]-[hash].[ext]',

playground/worker/worker-sourcemap-config.js

@@ -35,7 +35,8 @@ export default (sourcemap) => {
     },
     build: {
       outDir: `dist/iife-${typeName}/`,
-      assetsInlineLimit: 100, // keep SVG as assets URL
+      assetsInlineLimit: (filePath) =>
+        filePath.endsWith('.svg') ? false : undefined,
       sourcemap: sourcemap,
       rollupOptions: {
         output: {