Add option to allow inline CSS in JS file instead of tiny chunks on production build

[duannx]

Let's say we lazyloaded component A.vue in the vue router. That component will be split into 2 chunks on the production build A.xxx.js and A.xxx.css. There is a good chance that the size of these chunks is very small and it will take up an additional request and some RTT to fetch a tiny file.

The idea here is to add an option to merge A.xxx.js and A.xxx.css into one file A.xxx.js. The A.xxx.js will be responsible for adding CSS to HTML when it is called. We still keep the benefit of lazy load modules and save an additional request and some RTT. It will speed up our application

The trade-off so far I can think about is we need to build some function to add the CSS on SSR to prevent FOUC

[LinusBorg]

This all depends on how the build tooling handles the css. It's not something we can solve in core.

i.e. with webpack/css-loader that should.be possible.

[duannx]

@LinusBorg Thank you for your reply. I agreed that the build tool should handle this. But as I understand vue should handle the work that decides when to inline the CSS or when to split it into an external link, right? Anyway, I would like to make it works but it requires deep knowledge of how Vite/Vue works together. It would be a lot of work to do when diving in.
So if possible, could you please suggest to me where and how to start?

[LinusBorg]

But as I understand vue should handle the work that decides when to inline the CSS or when to split it into an external link, right?

No, that's the build tool's job, as I said. Our Build tool plugins (vue-loader, vite-plugin) just transform the style block into an import statement that serves the css like a file import (but from memory) what the build tool does with that css import is up to the tooling.

[duannx]

Thank you for confirming that. I will take a look at the vite-plugin.

[fanlion]

i want to transplie an App, which create by vite, and publish it into npm, css in js is finaly probrom for me