Opt-out of asset inlining - with SSR support

[hyunbinseo]

Description

Allow individual static asset imports to opt-out from inlining.

The following SVG file is inlined in the build process.

<script lang="ts">
  import background from '$lib/static/background.svg';
</script>

<div style:background-image={`url("${background}")`}></div>

Currently, asset inline can only be disabled globally.

You can disable inlining SVG by setting the assetsInlineLimit option to 0. The default is 4096 (4KiB).

#14643 (comment)

Suggested solution

Utilize the explicit URL import syntax.

<script lang="ts">
  // Do not inline the SVG. Use the href value in the CSS.
  import background from '$lib/static/background.svg?url';
</script>

<div style:background-image={`url("${background}")`}></div>

Alternative

The new URL(url, import.meta.url) method exists, but it does not work in SSR.

This pattern does not work if you are using Vite for Server-Side Rendering, because import.meta.url have different semantics in browsers vs. Node.js.

https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

Additional context

Related issue and PR:

• add an option to not to inline assets in library mode when format is 'es' #4454
• feat(build)!: inline SVGs #14643

SvelteKit context:

• The Node.js adapter does not cache files in the /static directory.
• Use Vite's static asset import, which will set a cache header for 365 days.
• Static files under 4 KiB are inlined, and this cannot be opted out per-file.

https://github.com/sveltejs/kit/blob/511126b51d4aaa770704491ff0890a76fa116205/packages/adapter-node/src/handler.js#L54-L56

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

Vite 5.1+ supports callback style build.assetsInlineLimit. You can filter individual files with it.

assetsInlineLimit: (file) => {
    return !file.endsWith('.svg');
}

[hyunbinseo]

@sapphi-red Thank you. Forgot to mention it in the issue body.

However, I am not sure if it is a friendly DX - especially for specific files.

const configuration = {
  build: {
    assetsInlineLimit: (file) => {
      const pathnames = [`${process.cwd()}/src/lib/static/background.svg`];
      if (pathnames.includes(file)) return false;
    },
  },
};

// vs

import background from '$lib/static/background.svg?url';

[bluwy]

Related: #15454

[sapphi-red]

The downside of using a query is the possibility of bundling a single file both as inlined and as non-inlined.

import backgroundUrl1 from './background.svg?non-inlined-url' // https://...
import backgroundUrl2 from './background.svg' // data:...

[sapphi-red]

Closing as #15454 is merged.