Vue-Router 是 Vue.js 的官方路由管理器。它允许你在单个页面应用中构建 SPA（单页面应用程序），从而快速、轻松地构建高质量、可扩展的 Web 应用程序。然而，当你在 Vue-Router 中使用了大量的异步组件和子路由时，你可能会发现页面在进入时会有卡顿，影响用户体验。别急，本文将为你介绍一个解决方案。
背景
在使用 Vue-Router 过程中，我们经常使用异步组件和子路由来打造像 Tab 栏、Tab 页等一系列业务模块。如下是一个使用 Vue-Router 实现的路由：
----- ------ - --- -----------
------- -
-
----- --------
---------- -- -- ---------------------------
--------- -
-
----- -------
---------- -- -- --------------------------
--
-
----- -------
---------- -- -- --------------------------
-
-
-
-
--这里，我们定义了一个 /home 路由，该路由包含两个子路由 /tab1 和 /tab2。每个视图组件使用了异步组件来延迟加载，保证初始化的速度。虽然这样做可以维持页面加载速度，但是在切换 tab 页时，我们会发现页面卡顿，不流畅。造成这种状况的原因是 Vue-Router 缺乏页面预加载机制，导致在首次进入子路由时会等待异步组件的加载，导致卡顿。
如下是一个 Vue-Router 官方提供的 Demo：
----- ------ - --- -----------
------- -
- ----- ------- ---------- --- --
- ----- ------- ---------- --- -
-
--
----- --- - --- -----
------
-----------------在这个 Demo 中，当我们进入 /foo 或 /bar 路由时，页面会有明显的卡顿。
那么，如何避免这种卡顿现象呢？
解决方案
解决这个问题的关键是添加一些非常小的 CSS 预加载器 (pre-loaded)，以在异步加载的 JS 文件完成之前使关键 CSS 已经可用。通过执行此操作，您可以明显地减少由于 JavaScript 文件加载时首次加载页面而导致的卡顿。
我们可以使用 Webpack 插件 preload-webpack-plugin 来自动生成并注入 preload 标签到 HTML 中。在 Vue-CLI 3 中，已经集成了该插件，它会在生成的 HTML 模板中自动插入预加载标签。您可以通过以下配置对插件进行更多的定制：
----- -------------------- - ---------------------------------------
-------------- - -
----------------- -
-------- -
--- ----------------------
---- ----------
-------- -------- ------- --------
----------------- ---------------
-------------- ---------- --------
---
--- ----------------------
---- -----------
-------- -------------
--
-
-
--其中：
rel定义预加载类型，可以为preload或prefetch。include定义需要预加载的模块集合。在本例中，我们包含了home、tab1和tab2，这三个是主要需要注意的异步组件。Prefetch可以指定仅对某些异步组件执行预取操作。excludeHtmlNames定义需要排除的 HTML 文件名。以下示例将index.html排除在预加载之外。fileWhitelist定义允许的 MIME 类型。在本示例中，我们允许了.vue和.js，其他文件类型将不进行预加载。
一旦您的 Webpack 配置正确，当您启动应用程序时，您会注意到额外的 HTTP 请求发送到服务器以获得预加载 CSS，并且 JavaScript 文件现在有更多时间在后台下载。预加载的 CSS 还可以减少渲染和布局过程中的闪烁。它不仅可以改善所有浏览器的性能，而且特别适用于移动设备。同时，您将注意到页面加载时间比以前短。
示例代码
下面是一个完整的 HTML 文件代码示例，其中包含 Vue.js、Vue-Router 和 Webpack：
--------- -----
------
------
--------- -----------
----- ---------------- -------------- --
----- ------------- -------------- ------------
----- ------------- -------------- ------------
----- ------------- -------------- ------------
-------
------
---- ---------
------------ ----------------------------------
------------ ----------------------------------
---------------------------
------
------- ---------------------------
------- -------------------------
------- ----------------------
-------
-------以上代码中，我们使用了 preload 标签来描述需要预加载的 JavaScript 文件，具体包括了 home.js、tab1.js 和 tab2.js，这对我们异步的组件将非常有帮助，能够有效地减少进入页面时的卡顿。除此之外，我们还展示了两个 router-link，分别链接到 /home/tab1 和 /home/tab2。这两个链接分别对应了我们的异步组件。最后还使用了 router-view 插槽应用路由占位符。
结论
Vue-Router 是一个非常好用的路由管理器，但是在处理复杂页面、嵌套路由、异步组件等场景时，容易出现页面卡顿的问题。靠着 preload-webpack-plugin Webpack 插件，我们可以巧妙地解决这个问题，避免了组件的重复加载和页面卡顿等问题，给用户带来更好的交互体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6712356bad1e889fe203536f