如何全局自动化注册异步组件?

vue 文档关于：组件的全局自动化注册：

https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

 

优化一下，如果我们想把组件做成全局的异步组件，应该如何做了：

实际上新版本的 require.context 新增加了一个属性，就可以做异步注册了：

require.context(
  directory: String,
  includeSubdirs: Boolean /* optional, default true */,
  filter: RegExp /* optional, default /^\.\/.*$/, any file */,
  mode: String  /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
)

 真实代码如下：

// 统一注册全局异步组件(业务组件 和 ui组件)
export default (Vue, options) => {
    // require.context 中 mode 属性,default:async，默认会打包到app.js文件里；可以使用 lazy 设置为 chunk module
    const context = require.context('@/components/', false, /^p|v|ui+\.vue$/, 'lazy');
    // 遍历获取组件对象，注册组件
    context.keys().map(fileName => {
        const componentname = fileName.replace("./", "").replace(".vue", "")
        Vue.component(componentname, () => context(fileName))  //注意: 这里直接使用 ()=> import('path') 和 require 按需方式都不会生效
    })
}