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 键保存在这里的吗？

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

Answer 1

如果您指的是来自 Vue CLI 的默认应用程序模板，那么您实际上是在观察 About 页面的 prefetch，旨在减少用户可能会访问的页面的加载时间。

如果你想避免这种性能优化，请使用这个 Vue 配置：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

---

对于故障排除参考，Chrome 的网络面板包含一个Initiator column，它提供了一个可点击的链接，指向触发网络调用的源文件。在这种about.js 的情况下，源文件如下所示：

Answer 2

尝试使用vue-lazyload 可能会有所帮助，对于<script> 标签，您可以尝试async defer 它有助于网站速度优化

Answer 3

您还可以使用 webpack “魔术” cmets (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/