vue中两种import方式有什么区别

Question

import BaseLayout from '@/components/Layout/BaseLayout';
export default {
  components: {
    BaseLayout
  }
}

export default {
  components: {
    BaseLayout: () => import(/* webpackChunkName: 'BaseLayout' */ '@/components/Layout/BaseLayout')
  }
}

想问问这两种引入组件的方式，有什么区别吗

Answer 1

前者静态加载，后者动态加载。

主要区别点就在于最后打包到一个 bundle 文件里、还是分包打包。

Answer 2

上面的是同步加载，下面的是异步加载，下面的配合webpack，可以做到分片打包加载。

Answer 3

第二个是按需加载，只有需要用到这个资源的时候才去加载。这种方式可以减少首屏加载时间，减轻网络压力