[TOC] ## 概述 使用 Webpack 的动态导入来延迟加载组件。Vue 支持在渲染时延迟加载组件和代码分割。这些优化让你可以只在需要时加载组件代码,从而减少 HTTP 请求、文件大小,并自动提高性能 ### 全局加载异步组件: ``` import Vue from 'vue'; //Where 'editor' is the name of the component <editor></editor> //Returns a promise that only gets called when the compoent is rendered and then cached. Vue.component('editor', () => import('./componetns/Editor.vue')); ``` ### 本地加载异步组件: ``` <template> <section> <editor></editor> </section> </template> <script> export default { name: 'dashboard', components: { 'Editor': () => import('./Editor') } } </script> ```