vue实现异步加载组件

公司项目有一个需求,在展示平台页面以网格化页面展示,每个网格可以根据用户配置,搭配不同的组件,
可搭配的组件最终可能有上百种,如果不用异步的模式加载组件的话,最终打包的app会有很大一部分的冗余代码(用户没有配置的组件也会打包到js文件中)
这个时候,每个组件分别打包成一个js,最终通过异步加载的形式加载进来是比较好的办法.
关于异步打包,vue官方文档已经有写
官方链接
不过官方写的有点不好理解,其实搭配webpack只是最简单的改一下:

// import xxx from './xx/xxx'  // 头部不再需要引入
export default {
    components:{
       ...,
       xxx: resolve=> require(['./xx/xxx.vue'],resolve)  // 在components对象中引入路径即可,最终webpack打包会是一个单独的js文件
    }
}

其他代码都是一样的,不过一般来说,如果是动态引入组件的,基本上不会用template模板去写html标签,会直接在对象中写render方法
组件的名称以字符串的形式引入即可:

export default {
  ...,
  render(h){
     h('xxx')    // 创建一个xxx组件 等于<xxx /> h的具体用法参考vue官方createElement 
  }
}

关于render的学习用法,一个简单的方法是自己写一个template模板页面,然后用webpack打包后,在打包后的js中通过定位搜索找到render函数,看官方vue-template-compiler处理后的js代码,看几次就很明白了.(感觉这是最好的办法^_^)