Code split by route in VueJS
In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.
Additional Resources https://router.vuejs.org/en/advanced/lazy-loading.html
Instructor: [00:00] I have a simple Vue application here that I've initiated using the vue-cli 3. The only options that I've chosen are the router and eslint. I have an about page and a home page.
[00:12] When I look at my network requests here in Chrome DevTools, I can see that I have one larger app JS file. Given it's not minified or [inaudible] in development here, but it's 1.8 megabytes by itself.
[00:26] What I'm going to do for this lesson is show how you can code split based upon route. Since I have two routes, home and about, I don't necessarily need to load the about component or code on the home page and vice versa.
[00:39] Let's go and look at our code. Here are my routes. This is just typical Vue boilerplate here. My router JS file looks like this. I have a home and about component that I am importing in two routes.
[00:53] What I need to do in order to code split these routes is I need to import the home and the about component in a different manner. Since vue-cli is built using webpack, we can use something called Dynamic Imports. Before I can go on, I need to do two things. The first thing is I need to install and apply the Syntax Dynamic Import plugin to Babel.
[01:13] The second thing I need to do is make sure I have the babel-eslint parser applied to eslint. This way, eslint invaluable happy. Next, I need to adjust the home and about imports to use the dynamic import syntax.
[01:28] I'll do that by creating a function for each component that returns import statement. Whenever webpack sees an import, it'll generate a chunk or code split in return to promise. That's really all we need to do to actually start code splitting with Vue in webpack.
[01:43] Let's go ahead and check out the browser to see what it looks like. If we look in our network tab, we now have two JavaScript files. One for app.js and one for zero.js.
[01:53] Zero.js holds the code that is necessary to render the home page. App.js is runtime stuff like the router, vue etc. If we click on about, you'll notice that we have a one.js that is loaded, which represents the about page.
[02:09] Now we have our route split into two separate JavaScript files, so we're not loading unnecessary and unused code on each page. When you have many pages, this can really help cut down load cost and initial render time.
[02:20] One way we can make this a little better, is to assign a name to each of these JS files, so we know which file belongs to what component. Luckily, webpack gives us a nice solution to do this right in the import. Add webpackChunkName in comments and webpack will use that as a chunk name instead.