Vue Router 的懒加载是一种延迟加载（或按需加载）路由组件的技术。在默认情况下，Vue Router 会将整个应用的路由组件打包到一个单独的 JavaScript 文件中，这样可能导致应用首次加载时需要下载大量的 JavaScript 代码，影响页面加载性能。
懒加载通过将路由组件分割成小的代码块，并在需要时动态加载，从而减小初始加载体积，提高应用的性能。这种加载方式可以通过 Webpack 的动态 import 或 Vue 提供的 import 函数来实现。
以下是一个使用懒加载的简单示例：
// 在路由配置中使用动态 import
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');
const Contact = () => import('./views/Contact.vue');
const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About },
{
path: '/contact', component: Contact },
];
// 路由配置
const router = new VueRouter({
routes,
});
在这个例子中，每个路由组件通过动态 import 延迟加载，只有在用户访问相关路由时才会下载对应的组件代码。这样，初始加载时只会包含应用的基础部分，使页面更快地呈现给用户。
为什么使用懒加载？
减小初始加载体积： 将应用初始加载的 JavaScript 代码减小到最小，提高页面加载性能。
按需加载： 只有在用户访问相关路由时才加载相应的代码，降低了初始页面的加载时间。
优化用户体验： 用户只下载实际需要的代码，加速页面的显示，提升用户体验。
分割代码： 更好地利用浏览器缓存，避免每次访问都重新下载整个应用的代码。
总体而言，懒加载是一个优化 Vue 应用性能的重要手段，特别是在应对大型单页应用（SPA）或需要加载大量组件的场景中。
