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