vue的路由懒加载

路由懒加载官方介绍

---

非懒加载写法：

import Login from '@/components/Login'

全部路由涉及到的文件会被打包到 app.xxx.js 中

懒加载写法：

const Login = () => import('@/components/Login')

---

这里要扩展说明的是 把组件按组分块：

const Login = () => import(/* webpackChunkName: "group-index" */ '@/components/Login')

这样去写的话，那么 webpackChunkName: "group-index" 的全部路由组件就会被打包到一块儿，如 0.faxxx.js，若是有多个组，那么就是依次 1.xxx.js，2.xxx.js。 比方说 用户相关的路由为一组，设置相关的路由为一组等，打包完成后的打印日志能看到每一个组对应的js文件：

这样的话，首屏加载的时候就不会一次性下载全部路由文件，而是根据当前页面下载对应的文件，等到用户首次跳转到另外一个路由组的时候再进行下载。

好比 编译后，我首次加载主页，那么会下载 group-index 对应的路由文件资源，以后跳转用户列表页，再下载 group-user 路由文件资源。

这样的话初始化的时候会比以前稍微快些，由于首次加载少下载了一些资源。

但反作用就是，当你跳转到新的分组页面的时候，会卡那么一下，由于须要等待下载路由文件资源，等待时间根据用户网路和当前路由文件资源大小决定，因此路由文件组的分割须要开发者本身进行判断。

我的建议打包后若是超过1M了能够考虑拆分一下，网速慢的话可能下载须要1~2s时间。

原文出处：https://www.cnblogs.com/cielsys/p/10457945.html