如何全局自動化註冊異步組件?

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 按需方式都不會生效
    })
}