vue中两种import方式有什么区别_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

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

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

###

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

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

###

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

###

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