vue.js - vue 和 webpack 不会在组件中进行延迟加载？

Question

vue/webpack 中的惰性组件似乎是错误的，或者我想念对术语的混淆。

为了延迟加载组件，我使用关键字 import并且 webpack 应该将这个组件拆分成单独的包，当我需要加载这个组件时，webpack 应该处理它并加载组件。

但事实上，webpack 确实生成了单独的文件，但它在应用程序运行时无论如何都会加载。这是出乎意料的。

例如，我只是创建了一个简单的 vue 应用程序(使用 cli)并浏览到 localhost:8080/并且应使用 import 加载关于页面(默认情况下)关键字。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

所以这是设计使然？我每次加载我现在不需要的文件(关于页面)。如果我有 200 页，我将提取 200 个我不需要的文件。结果如何？我是通过使用 import 保存在这里的吗？ key ？

在vuetify例如他们使用 import键，但无论如何都会加载文件，而不是按需加载。

Answer 1

您还可以使用 webpack 的“魔法”注释之一 ( https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules ) 避免组件预取，例如。

components: {
  MyComponent: () => import(/* webpackPrefetch: false */ './MyComponent.vue')
}

请随时阅读下面有关此 Vue 优化的更多信息:

https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/