vite-plugin-singlefile
vite-plugin-singlefile copied to clipboard
Inlining a favicon outside of /public folder doesn't work
I'm aware of the limitation which prevents this plugin from inlining assets from the public
folder, however I have the following HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="/src/assets/favicon.png">
</head>
<body>
<header>
<img src="/src/assets/logo.png" />
</header>
<main> (...js and css...)</main>
</body>
</html>
This is how the structure of my project looks like:
src
├── assets
│ ├── favicon.png
│ ├── logo.png
└── vite.config.js
└── index.html
And my vite.config.js
export default defineConfig({
plugins: [viteSingleFile()],
build: {
assetsInlineLimit: 999999,
}
})
In theory, both assets (the favicon and the logo) should be inlined as they both are located outside of the public
folder and they both meet the file size limit criteria. However, when I build the project I get this:
vite v5.2.8 building for production...
✓ 15 modules transformed.
rendering chunks (1)...
Inlining: index-phi6qHca.js
Inlining: style-DfwcZBBi.css
NOTE: asset not inlined: favicon-Ch38otTT.png
dist-single-file/favicon-Ch38otTT.png 0.83 kB
dist-single-file/index.html 542.08 kB │ gzip: 202.44 kB
✓ built in 764ms
And if I look inside the generated .html file, indeed the favicon isn't inlined, but the logo is.
Is this a limitation of this plugins or am I hitting a bug?
It's not a bug, but the README may have some info that is specific to VueJS, which is the only framework I use with it personally.
With Vue, assets in the "public" folder are never bundled, so this plugin can't inline them.
If you're using another framework that doesn't have a public folder or applies different rules to what is or isn't bundled, those rules would still apply here as well.
I'm not using any framework, this is plain html + js. What strikes me is that both the favicon and the logo are located inside the assets
folder, but only the second is inlined.
Closing, this appear to be out of scope for this plugin, and should be addressed by rollup or by using a Data URL
Note that this can actually be done with this plugin once https://github.com/richardtallent/vite-plugin-singlefile/issues/95 is implemented