I'm working with a static build that has an entry file size of about 2MB, and I'm trying to figure out the best strategy for code splitting. Most of the size comes from node_modules. Should I split all of node_modules or just the largest dependencies? It seems like there's a trade-off because marking node_modules as vendor makes the entry file smaller, but the vendor file can still end up being large and slow to load. How do you guys handle this? Also, should I use gzip compression for my files?
3 Answers
By the way, what server are you using that doesn’t have gzip compression enabled by default? Just curious!
When bundling your node_modules or specific packages, just remember that splitting doesn’t actually reduce the initial download size. It still needs to be downloaded regardless of how you split it. Sometimes, it can even make things worse. The real benefits come from caching those bundles since they don’t change often. To really reduce your initial bundle size, consider using dynamic imports for lazy loading and removing unused code.
Right! So even if I split the node_modules, I'd still have to wait for them to load after the entry point finishes, right? What’s your take on using gzip?
Starting by splitting off the larger modules is usually a good move. Plus, enabling gzip or brotli compression on Vite helps a lot since Vite already handles some chunking in the build process. Just make adjustments based on the analysis of your bundles.
That sounds like a solid plan. I doubt I can get my entry file under 1MB, but I think Vite can potentially gzip it down to around 300KB.
I’m using IIS.