vite build static assets are inlined

[tanhauhau]

Describe the bug

Because of how svelte kit is passing the entry file as lib: in vite build

kit/packages/kit/src/core/build/index.js

Lines 58 to 62 in 5416bd7

	lib: {
	entry: client_entry_file,
	name: 'app',
	formats: ['es']
	},

all static files, ie: *.png, *.mp4 are inlined in the build, due to this logic in vite:

https://github.com/vitejs/vite/blob/5d4e82d90238b0d52ded1eea6359947eefc5e054/packages/vite/src/node/plugins/asset.ts#L200-L207

Expected behavior
Honour assetsInlineLimit in vite.config.js and emit as a separate assets if it exceeds the inline limit.

I can understand why vite is implemented that way, at the same time, I'm not sure what other apis / ways we could do on svelte kit side alone. I believe this requires changes on both sides

[Rich-Harris]

oh, interesting. not sure i can think of a situation where you want assets to be referenced at all. there's not a lot you can do with an mp4 when you're SSR'ing HTML. Maybe we can work around it with build.rollupOptions.

[aloker]

I just stumbled upon this issue. All assets are inlined - images, fonts, etc. For example, I was trying to use a @fontsource package and the font files referenced by the css file in the package were all inlined into the generated css files. Images that are referenced from components are inlined in the respective javascript (and html in case of adapter-static) files.

I'd very much like to explicitly import assets from js/css to benefit from hashed file names (infinitely cachable) and maybe other pipeline steps (e.g. image optimizations).

[aloker]

The problem is actually not the assetsInlineLimit, but rather the fact the build.lib configuration option is set by Svelte Kit:

kit/packages/kit/src/core/build/index.js

Lines 122 to 129 in 17bb699

	lib: {
	// TODO i'm not convinced this block is necessary if we're
	// providing inputs explicitly via rollupOptions, but without
	// it Vite complains about the dynamic import polyfill
	entry: client_entry_file,
	name: 'app',
	formats: ['es']
	},

If that is set, assets are never exported as files. Without the lib option, the compiler runs into an issue with the dynamic import polyfill as mentioned in the comments.

With just this line https://github.com/vitejs/vite/blob/5d4e82d90238b0d52ded1eea6359947eefc5e054/packages/vite/src/node/plugins/asset.ts#L201
commented out, assets get emitted (the default asset inline size limit is 4096 bytes, but can be overridden by kit.vite.build.assetsInlineLimit. So - the question is how to make vite work without setting the lib property.

[aloker]

I found that disabling lib mode and explicitly disabling the dynamic import polyfill gives practically identical results, but causes imported assets to be properly emitted.

Pull request: #741

[Rich-Harris]

closed via #741

[reesericci]

I'm getting this same issue when deploying to Netlify. I have a link to download a ".pub" file in assets, ".pub" was added to vite.assetsInclude, but I just get a base64 inline thing. I imported the asset with import url from "$lib/assets/pubfile.pub" then referenced that in my a tag: <a href={url}>link</a>

Interestingly enough, this doesn't happen with my ".gpg" files or any other asset, and I imported them in the same exact way.