feat: Adding callback to assetsInlineLimit. Passes the `filePath: s…

…tring`, `contentSize: number` and currently accrued bundled size `totalBundledSize: number`

docs/config/build-options.md

@@ -48,10 +48,12 @@ Specify the directory to nest generated assets under (relative to `build.outDir`
 
 ## build.assetsInlineLimit
 
-- **Type:** `number`
+- **Type:** `number` | `((filePath: string, size: number, totalBundledSize: number) => boolean)`
 - **Default:** `4096` (4kb)
 
 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.
+Can also defined as a function that return boolean if it should bundled.
+Passes the `filePath: string`, `contentSize: number` and currently accrued bundled size `totalBundledSize: number`
 
 ::: tip Note
 If you specify `build.lib`, `build.assetsInlineLimit` will be ignored and assets will always be inlined, regardless of file size.

packages/vite/src/node/build.ts

@@ -88,9 +88,13 @@ export interface BuildOptions {
   /**
    * Static asset files smaller than this number (in bytes) will be inlined as
    * base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
+   * Can also defined as a function that return boolean if it should bundled.
+   * Passes the `filePath`, `contentSize` and currently accrued bundled size `totalBundledSize`
    * @default 4096
    */
-  assetsInlineLimit?: number
+  assetsInlineLimit?:
+    | number
+    | ((filePath: string, size: number, totalBundledSize: number) => boolean)
   /**
    * 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

@@ -15,7 +15,10 @@ export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 const rawRE = /(\?|&)raw(?:&|$)/
 const urlRE = /(\?|&)url(?:&|$)/
 
-const assetCache = new WeakMap<ResolvedConfig, Map<string, string>>()
+const assetCache = new WeakMap<
+  ResolvedConfig,
+  Map<string, { url: string; size: number }>
+>()
 
 const assetHashToFilenameMap = new WeakMap<
   ResolvedConfig,
@@ -373,22 +376,27 @@ async function fileToBuiltUrl(
   const cache = assetCache.get(config)!
   const cached = cache.get(id)
   if (cached) {
-    return cached
+    return cached.url
   }
 
   const file = cleanUrl(id)
   const content = await fsp.readFile(file)
+  const totalBundledSize = [...cache.values()].reduce(
+    (memo, { size }) => memo + size,
+    0
+  )
 
-  let url: string
+  const mimeType = mrmime.lookup(file) ?? 'application/octet-stream'
+  let url: string = `data:${mimeType};base64,${content.toString('base64')}`
+  let size: number = (url.length - 814) / 1.37
+  const shouldInline =
+    typeof config.build.assetsInlineLimit === 'function'
+      ? config.build.assetsInlineLimit(file, size, totalBundledSize)
+      : size < Number(config.build.assetsInlineLimit)
   if (
-    config.build.lib ||
-    (!file.endsWith('.svg') &&
-      content.length < Number(config.build.assetsInlineLimit))
+    config.build.lib === false ||
+    (file.endsWith('.svg') && shouldInline === false)
   ) {
-    const mimeType = mrmime.lookup(file) ?? 'application/octet-stream'
-    // base64 inlined as a string
-    url = `data:${mimeType};base64,${content.toString('base64')}`
-  } else {
     // emit as asset
     // rollup supports `import.meta.ROLLUP_FILE_URL_*`, but it generates code
     // that uses runtime url sniffing and it can be verbose when targeting
@@ -422,10 +430,11 @@ async function fileToBuiltUrl(
       emittedSet.add(contentHash)
     }
 
+    size = 0
     url = `__VITE_ASSET__${contentHash}__${postfix ? `$_${postfix}__` : ``}`
   }
 
-  cache.set(id, url)
+  cache.set(id, { url, size })
   return url
 }