vue.js - 延迟加载 - 它什么时候下载 block 文件?

标签 vue.js webpack vuejs2 vue-component lazy-loading

我正在使用 vue.js 。例如,我想对路由使用延迟加载。

假设我通过触发 (npm run build) 使用 webpack 构建了项目。

然后,随着 webpack 开始构建,它会分别生成所有的 chunks

问题:据说当使用懒惰路由时,只有那个js文件被加载到我们将要走的路线上。正确的?如果是这样,当移动到另一条路线时,应该加载另一个 block js 文件。这个 block 从哪里来?

  1. 从服务器?如果是这样,我们就完全失去了 SPA 的意义,因为 对于每次路由更改,我们都会去服务器并询问必要的 js 文件。
  2. 如果不是来自服务器,那么我们第一次下载的时候已经下载了 加载页面。如果是这样,为什么拆分它是个好主意 如果第一页加载仍需要下载所有 大块?

最佳答案

它将从服务器下载,但是您不会失去所有 SPA 优势,因为其他 block 可以在停留在初始页面时预加载。这是从初始 block 呈现的。 如果你想快,你不能一次从服务器加载所有东西。您仍然需要与服务器通信。 SPA 的重点更多是摆脱重新下载 html/css/js 样板文件,并专注于为应用程序提供新数据(以及您的案例中的 View 和逻辑)。

关于vue.js - 延迟加载 - 它什么时候下载 block 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57492501/

相关文章:

vue.js - 如何为一个 Vue 组件重新定义 Vee Validate 错误消息?

javascript - 当 WebRTC 回调中的属性更改时,不会触发 Vue.js 更新

javascript - Vuejs数组渲染

vue.js - 为什么我不能在我的 Vue 应用程序上使用调试器或 console.log

javascript - Vue.js + axios = 数据未更新

TypeScript 编译中缺少 Angular5 :polyfills. ts &\main.ts

css - 带有动态参数列表的 SASS mixin 仅适用于一个参数

php - 试图从命名空间 "WebpackEncoreBundle"加载类 "Symfony\WebpackEncoreBundle"。您是否忘记了另一个命名空间的 "use"语句?

javascript - 无效的 prop : type check failed for prop "items". 预期数组,得到字符串

javascript - 多选Vue.js和计算属性