Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') )
当使用局部注册组件的时候，你也可以直接提供一个返回 Promise 的函数：
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
如果你想实现异步加载组件的功能，提高首屏显示速度，那么可以使用上面例子中的定义组件的方法，也就是：箭头函数+import语句！
处理加载状态
2.3.0+ 新增
异步组件的工厂函数也可以返回一个如下格式的对象，用来灵活定制异步加载过程：
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 })
注意如果你希望在 Vue Router 的路由组件中使用上述语法的话，必须使用 Vue Router 2.4.0+ 版本。
九、批量导入组件
很多时候我们会编写一些类似输入框或按钮之类的基础组件，它们是相对通用的组件，称为基础组件，它们会在更大一些的组件中被频繁的用到。
这很容易导致大的组件里有一个很长的导入基础组件的语句列表，例如：
import BaseButton from './BaseButton.vue' import BaseIcon from './BaseIcon.vue' import BaseInput from './BaseInput.vue' //更多导入 export default { components: { BaseButton, BaseIcon, BaseInput } }
当你的基础组件很多的时候，这个过程将非常重复、麻烦和无聊。
require.context()
如果你恰好使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 方法批量导入这些组件，然后将它们注册为全局组件，这样就可以在任何地方直接使用它们了，再也不用为导入的事情烦恼了！
下面是一个示例代码：
import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( // 其组件目录的相对路径 './components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { // 获取组件的配置，也就是具体内容，具体定义，组件的本身代码 const componentConfig = requireComponent(fileName) // 获取组件的 PascalCase 命名，用来规范化组件名 const componentName = upperFirst( camelCase( // 获取和目录深度无关的文件名 fileName .split('https://www.jb51.net/') .pop() .replace(/\.\w+$/, '') ) ) // 全局注册组件 Vue.component( componentName, // 如果这个组件选项是通过 `export default` 导出的， // 那么就会优先使用 `.default`， // 否则回退到使用模块的根。 componentConfig.default || componentConfig ) })