One possible downside to bundling your single page app with Webpack is that you can end up with a really big bundle file, sometimes several megabytes in size!
|bundle.main.js||1.36 MB 😞|
The problem with this is that a user must download the whole file and run it before they can see anything on the screen. If the user is on a mobile device with a poor connection this process could take quite some time.
Code splitting is the idea that a bundle can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
For example, looking at this simple web page, we can identify portions of the app that we don’t need on the initial load:
What if we delayed loading these parts of the code until after the initial render? It would allow a user to see and interact with the page much quicker.
In this article I’ll show you how Vue.js and Webpack can be used to split a single page app into more optimally sized files that can be dynamically loaded.
The key to code splitting a Vue.js app is async components. These are components where the component definition (including its template, data, methods etc) is loaded asynchronously.