Load Vue Async Components
Vue provides a straight-forward syntax for loading components at runtime to help shave off initial bundle size. You simply define a function that returns an object with a component property pointing to a promise that loads a component, then Vue takes care of the rest for you.
Instructor: [00:00] I can take out this three component, create a file called three.js, export this three component, it is like that. Back in my app, I can dynamically load the three component are called as async three.
[00:21] This will be a function which returns an object where the component is an import statement pointing to the component. I'll say components/three. On my list of components, I can do one, two, and async three. I'll open up the network tab, make it quite a bit bigger, and you'll see I'll switch to two, nothing loads.
[00:48] I'll switch to three and you'll see I get three.chunk, and their responses is three component with that code in component code in there, which was loaded dynamically.