时间戳

首页 > 解决方案 > 异步组件会加快加载时间吗？

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

问题描述

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

我想在渲染主组件（页面）之后加载一个子组件（以下示例中的“my-modal” ）（以加快页面的加载时间）。这个子组件比较重，意味着经常打开，但默认是隐藏的（它是一个模态的）。所以我的策略是在页面加载后立即加载，而不是与页面一起加载，这样页面加载速度会更快。

我遇到了 vue 的异步组件，但我不确定它是否有帮助，是吗？

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

// 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>

我正在本地注册我的组件（本地注册），但我不确定它是否是最好的方法，也许是另一个问题......

标签： javascriptvue.jswebpack

解决方案

动态导入会生成一个新文件，并且这个新文件只会在用户进入该特定页面时下载，而不是在用户进入/.

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

推荐阅读