Add build.assetInlineExclude config

[gnuletik]

Is your feature request related to a problem? Please describe.

When building for production, the following line :

<!-- index.html -->
<link rel="icon" type="image/png" href="favicon.png">

get transformed in this

<!-- index.html -->
<link rel="icon" type="image/png" href="data:image/png;base64,...(not included)...">

Inlining the favicon png does not allow browser caching. I'd rather like it to not be inlined but keep inline feature for other files.

Describe the solution you'd like

Have a way to exclude some files from being inlined.

A clear and concise description of what you want to happen.

// vite.config.js
export default {
  build: {
    assetInlineExclude: ['favicon.png']
  }
}

Would all assets except inline favicon.png.

Describe alternatives you've considered

Setting build.assetInlineLimit: 0 disables asset inlining but I want to keep it for other files than favicon.png.

[CHOYSEN]

Can not reproduce the icon get transform in default template, can you provide a repo link?

[gnuletik]

Hi @CHOYSEN, thanks for looking into it!

To reproduce the inlined image, I did :

• yarn create @vitejs/app some-app (select vanilla template)
• Replace the svg favicon with a png favicon in index.html (note: the png file must be small enough to be inlined)
• yarn run build && cat dist/index.html | grep icon

Here's a repo : https://github.com/gnuletik/vite-favicon-inlined.
You can simply :

git clone https://github.com/gnuletik/vite-favicon-inlined
cd vite-favicon-inlined
yarn install
cat dist/index.html | grep icon

Thanks!

[gnuletik]

I tried setting the ?url query parameter to the img's URL but it does not work

<link rel="icon" type="image/png" href="favicon.png?url">

cf https://vitejs.dev/guide/features.html#static-assets

[CHOYSEN]

I can see what you mean.

However, if the icon is small enough, i think caching may not make sense, which is why build.assetInlineLimit exists.

[gnuletik]

Thanks for the answer !

Yes, caching may be useless if the icon is small enough.
However, we may need to disable assets inlining according to other criterias than the asset weight.
For example, Data URI favicons are not supported in Internet Explorer and other browsers. Also, if an asset is imported 10 times, we'd rather like URL compared to inlined.

The best way may be to support "?url" parameter inside href attribute.
Should I open an issue for this ?

Thanks!

[CHOYSEN]

You can also move the icon file into a public folder if it is simply introduced in index.html.

https://vitejs.dev/guide/assets.html#the-public-directory

[kresli]

I just hit the same issue. Chrome works fine but the safari browser will not show an inline icon.

[onionhammer]

You can also move the icon file into a public folder if it is simply introduced in index.html.

https://vitejs.dev/guide/assets.html#the-public-directory

This is true if you don't want cache busting

[zitudu]

Do you know if there is any progress on this Issue?

Limited by content security policy, Chrome extension content scripts have to dynamic load an external script and it must not be base64 encoded.

Ref: https://stackoverflow.com/questions/70474845/inject-javascript-from-content-script-with-a-chrome-extension-v3#answer-71093921

[alexan]

a special parameter like ?url which would not respect assetsInlineLimit would be a solution for exceptions like this as well