javascript - 异步组件会加快加载时间吗？

Question

我在一个大型项目中使用 Vue 和 Webpack，我希望优化一些组件的加载。我已经懒惰地加载我的页面，但我想知道是否可以更进一步并动态加载这些页面内的子组件。

我想在主组件(页面)呈现后加载子组件(下例中的“my-modal”)(以加快页面的加载时间)。该子组件比较重，意味着要经常打开，但默认是隐藏的(它是一个模态组件)。所以我的策略是在页面加载后立即加载它，而不是与页面一起加载，这样页面可以加载得更快。

我遇到了vue的Async Components但我不确定它是否有帮助，是吗？

这是我使用老式“静态”导入所做的示例:

// page.vue

<script>
import myModal from "@/components/my-modal";

export default {
  components: {
    myModal,
  },
}
</script>

这是我如何动态导入子组件(又名“异步组件”)的示例:

// page.vue

<script>
export default {
  components: {
    myModal: () => import("@/components/my-modal"),
  },
}
</script>

我正在本地注册我的组件( local registration )，但我不确定这是否是最好的方法，也许是另一个问题......

Answer 1

动态导入会生成一个新文件，这个新文件只有在用户转到该特定页面时才会下载，而不会在用户转到 / 时下载。

这会提高加载速度并减少用户在访问您的网站时必须下载的字节数。