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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!