摘要：所以，那些使用较少的路由组件不必打包进里，只需要在路由被访问时按需加载。写起来像这样空数组用来指定该路由组件需要加载的依赖不过，你最好不要使用这种包裹起来的写法，因为会使用静态分析来检测和分割块。
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
译者：jeneser
使用当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。幸运的是：vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载。
假设你的路由配置是这样的：
import MainPage from "./routes/MainPage.vue"
import OtherMassivePage from "./routes/OtherMassivePage.vue"
const routes = [
{ path: "/main", component: MainPage },
{ path: "/other", component: OtherMassivePage }
]
简单来说，你可以使用require.ensure来替代import。它能帮你将OtherMassivePage组件以及该组件的所有依赖分割到一个多带带的chunk中去。
现在重启你的应用，你会发现并没有什么改变。但，当你打开开发人员工具，选择检查网络，再一次访问/other路径时，你会看到一个新的文件被加载进来。
import MainPage from "./routes/MainPage.vue"
const OtherMassivePage = r => require.ensure([], () => r(require("./routes/OtherMassivePage.vue")))
const routes = [
{ path: "/main", component: MainPage },
{ path: "/other", component: OtherMassivePage }
]
是的，这看起来是有点奇怪，相信我，它并不是那么糟糕。
还有一种方法是将路由对应的组件定义成异步组件。写起来像这样：
const OtherMassivePage = resolve => {
// 空数组用来指定该路由组件需要加载的依赖
require.ensure([], () => {
resolve(require("./routes/OtherMassivePage.vue"))
})
}
不过，你最好不要使用这种包裹起来的写法，因为WebPack会使用静态分析来检测和分割块。比较好的做法是，将他们写成一行以减少空间的占用。
按组分块有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名，提供require.ensure第三个参数作为 chunk 的名称：
// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const OtherMassivePage = r => require.ensure([], () => r(require("./routes/OtherMassivePage.vue")), "big-pages")
const WeightLossPage = r => require.ensure([], () => r(require("./routes/WeightLossPage.vue")), "big-pages")
不像许多其他的WebPack任务，这个方法出乎意料的简单，并且能产生意想不到的有用结果。如果你正在维护那些变得臃肿不堪的大型单页应用，我会毫不犹豫的将这种方法推荐给你。
End
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
译者：jeneser
译者GitHub：https://github.com/jeneser
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
勘误&讨论： New issue
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87253.html
摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...
摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和单独的组件也能够从主文件分割出来并延迟加载。 在前一篇文章中，我们学习了什么是代码分割，它是如何与 Webpack 一起工作的，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究，并学习...
摘要：我的目标是使本系列成为关于应用程序性能的完整指南。代码分割就是将应用程序分割成这些延迟加载的块。总结延迟加载是提高应用程序性能并减少其大小的最佳方法之一。在本系列的下一部分中，我将向您展示如何使用和路由来分割应用程序代码。 当移动优先（mobile-first）的方式逐渐成为一种标准，而不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章...
阅读 844·2021-10-25 09:45
阅读 3230·2021-09-22 14:58
阅读 3759·2021-08-31 09:43
阅读 878·2019-08-30 15:55
阅读 872·2019-08-29 13:51
阅读 1191·2019-08-29 13:02
阅读 3411·2019-08-29 12:52
阅读 1888·2019-08-26 13:27
