vue项目引入异步组件的两种方式

异步组件笔记： ES6 规范中，引入了import()语法,在还没有import()时，require.js由此而生。

<template>
  <div class="box">
    <demo1 />
    <demo2 />
    <demo3 />
    <demo4 />
    <demo5 />
    <demo6 />
  </div>
</template>
<script>
import demo1 from "@/components/dome1";
let demo2 = resolve => require(['../components/demo2'], resolve);
let demo3 = ()=>import(/* webpackChunkName: "demo3" */ './demo3.vue'),
//魔法注释, webpackChunkName会将该chunk打包成一个叫demo3.js的文件
let demo4 = resolve => require.ensure([],() =>resolve(require('./demo4.vue')),'demo4'),
//第三个参数配置后，会将该chunk打包成一个叫demo4.js的文件
export default {
  components:{
    demo1,
    demo2,
    demo3，
    demo4，
    // 或者在此引入，
    demo5: ()=>import(/* webpackChunkName: "demo5" */ './demo5.vue'),
    demo6: resolve => require.ensure([],() =>resolve(require('./demo6.vue')),'demo6'),
  }
  data () {
    return {
        data(){}
    }
  },
  watch: { },
  methods: { },
  created () { },
  mounted () { },
  beforeDestroy () { }
}
</script>
<style lang="scss" scoped> </style>

暂时不知道如何将webpackChunkName配置的chunk名字，弄成一个变量来动态变化???