Compile each single file component into a separate .js file?

Is there a way to not bundle every component into a single .js file? I have about 75 components, I’d like to just deliver the smaller components the specific pages need instead of one monster file with apps the users don’t even have access to.

Certainly, use async components.

Oh fantastic! I don’t suppose there’s maybe a tutorial on configuring the builder so it’s just spitting the SingleFileComponents into their own .js files along with the core app?

So I’d start with

But end with

I’m just not sure how to have it not combine just everything together on the watch

Technically you can configure webpack to split chunks differently. That said, getting every component to output as an individual js chunk is a road that isn’t really worth going down. The benefit to chunking is that it combines your code into modular chunks to not only make them more consumable using async methods, but also to reduce the amount of unnecessary code replication. If you chunked every .vue component into a .js, then that js file would also include its imported dependencies (that’s an oversimplification and depends on configuration, but something to be aware of).

There’s also the fact that you’ll then have to load every component async which will come with its own tradeoffs - one of which is it can actually slow down your app because you now have many network requests firing off at the same time and some of those may be things you need quickly on demand (think modals, toasts, etc.) so your user will have a perceived delay the first time this happens.

From my experience, the best approach is to start by async loading your router page components, but not any of your highly used components (modals, toasts, buttons, etc.). Often times just this is enough, but you can keep going with some heavier components until you find the right balance.