Vue 路由器如何帮助更快地加载页面？答案

【问题标题】：How does Vue router help to load page faster?Vue 路由器如何帮助更快地加载页面？
【发布时间】：2020-12-03 19:40:46
【问题描述】：

所以我今天才进入 Vue 路由器的主题。我知道它可以通过防止整个页面每次都刷新但只带来必要的组件来帮助更快地加载内容。

但是它不是已经在访问主页时加载了整个 bundle.js 文件（通过 Webpack）吗？那么既然我们在第一次访问的时候已经加载了整个JS文件，那么访问不同的页面时是不是就不需要调用单独的JS文件了？

This 是我正在观看的课程。

【问题讨论】：

标签： vue.js webpack vuex lazy-loading vue-router

【解决方案1】：

您所说的主要好处是从一个 URL 导航到另一个。

通常，这需要加载整个页面，例如

Page1.html  ? click link ?  Page2.html
 - JS                           - JS
 - CSS                          - CSS
 - Images                       - Images

但是通过使用组件路由器，您只需更换页面中已更改的部分，而无需重新加载所有布局。

这实际上是所谓的Single-page application 的核心，您的应用实际上是一个 HTML 页面，其中包含响应 URL 更改的部分。

通过操纵URI fragment（又名hash）或使用浏览器的History API，无需加载整个页面即可更改URL。

在 Vue Router 中，此选择由 mode configuration 控制。

“但它不只是加载了整个 bundle.js 文件吗”

不一定。见Lazy Loading Routes。

【讨论】：

感谢您的回答。所以澄清一下，即使我在 web 开发工具的 Network 选项卡下看到 app.js （webpack bundle js 文件），它也不包含所有文件？延迟加载会自动排除该特定页面的不必要的 .js 文件，对吗？
正确，但不仅仅是 JS 文件（图像、字体和 CSS）。延迟加载路由会创建 chunks，仅在请求这些特定路由时才加载（通过异步请求）。