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

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

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

阅读 4.6k
3 个回答

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

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

新手上路,请多包涵

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题