4-5.view-router的懒加载

懒加载的好处

官方描述：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
不使用路由懒加载的话，整个项目的组件都会打包到一个.js文件中去，当前端去向服务器请求时，可能出现资源过大导致页面有延迟或空白，当使用懒加载后，会将每个组件打包成一个js中，当前端需要哪个页面时，只需要加载对应的.js文件即可。

懒加载的写法(推荐)

1.代码展示

import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')

const routes = [
  {
    path: '/Home',
    component: Home
  },
  {
    path: '/About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2.打包展示

对比非懒加载可以清晰的看到多了两个js文件，这是由于将两个组件单独打包到一个js文件里面了

非懒加载的写法(不推荐)

1.代码展示

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/Home',
    component: Home
  },
  {
    path: '/About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2.打包展示