Instructor: 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.
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.
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.
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.
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.
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.
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.
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.
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.