search

richardtallent / vite-plugin-singlefile

Vite plugin for inlining JavaScript and CSS resources
MIT License
859 stars 58 forks source link

Is it possible to only include small bundles? #19

Closed danielo515 closed 2 years ago

danielo515 commented 2 years ago

Hello. Thanks for this plugin. I was wondering if it is possible to use it to only inline certain chunks. For example those smaller than 5kb to get a faster app startup.

again, thanks and regards

richardtallent commented 2 years ago

This might be possible, but I suspect that load/parsing order might be impacted, leading to broken code.

This plugin was intended for offline environments, where we must put all the code into a single file. A better solution for you would probably be to analyze your chunks and use normal code-splitting techniques (such as dynamically importing components in Vue) to separate "immediately-needed" code from code that can be loaded later. Also, adding more parallelism by enabling HTTP/2 may help, and ensuring you're using server-cached Brotli compression.

danielo515 commented 2 years ago

hello @richardtallent I understand your point. I am already using code split and I'm pretty sure netlify already does all those optimizations. The script insertion order was indeed a problem after my experiments.

However, I still think that I lining only Css can be a benefit. Will you be open to allow an option to select what to be inlined? CSS, JS or both?

richardtallent commented 2 years ago

On the plus side, inlining some CSS shouldn't impact the cascade -- when rules have equal selectivity, declaration order is what matters, not load order, and we're not changing the declaration order.

However, the smallest CSS files may not be the best to load earlier. For example, it could result in flashes of improperly-styled content, wasting paint cycles and creating some visual confusion. It could actually negatively impact performance by starting parallel requests for fonts, background images, or other CSS-referenced resources earlier, where they may compete with more important bundles that impact the first contentful paint.

This plugin is really intended for a narrow scope of inlining everything, for environments where that's a requirement (not a web server). I'd rather not try to expand that scope into something focused on performance, since that's a very tricky problem with lots of potential edge cases.

The code here is pretty stable as long as rollup doesn't change their plugin / options API, so I encourage you to fork and experiment! It would be interesting to see if you can come up with a CSS/JS inlining strategy that improves real-world performance without breaking a site. If you did, it still wouldn't be a good fit here -- we're hacking rollup's output with a sledgehammer, not a scalpel. But it might be worth raising as a logical tweak or option with the rollup team, since implementing it directly could benefit a much, much wider number of sites than will ever use this plugin.