vue3对于路由vue-router进行加载优化、打包优化（懒加载、分包）

未对vue-router进行打包优化时：

未优化的vue-router文件

export default router
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from "../views/Home.vue"
import Help from "../views/Help.vue"
import Country from "../views/Country.vue"
const routes: Array<RouteRecordRaw> = [
	{path: '/', redirect: '/home'},
	{ path: '/home', component: Home },
	{ path: '/help', component: Help },
	{ path: '/country', component: Country }
]

const router = createRouter({
	history: createWebHistory(), // 指定history模式
	routes
})

export default router

这样模式下，我们进行打包，最终路由文件引用的单文件组件，都会全部被打包在一起成为一个文件——chunk-7eee9f27.5ce33601.js

chunk-7eee9f27.5ce33601.js

当然，全部打包到一个文件，最大的问题就是这个文件很大，chunk-7eee9f27.5ce33601.js有835kB。

解决问题

鉴于以上问题：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

vue-router官方推荐我们用赖加载的形式来加载这些单文件组件。

官方路由懒加载地址：👈

// 将
// import Home from './views/Home.vue'
// 替换成
const Home= () => import('./views/Home.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/home', component: Home}],
})

或者写法：

const router = createRouter({
  // ...
  routes: [
 	 { 
	 	 path: '/home', 
	 	 component:  () => import('./views/Home.vue')
 	 }
  ],
})

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：

const Home= () =>
  Promise.resolve({
    /* 组件定义 */
  })

可以把组件，按组分块

使用 webpack

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)：

const Home= () =>
  import(/* webpackChunkName: "group-user" */ './Home.vue')
const help= () =>
  import(/* webpackChunkName: "group-user" */ './help.vue')
const country= () =>
  import(/* webpackChunkName: "group-country" */ './country.vue')

这里的代码，webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
也就是说会将home和help打包在一起，country单独打包。

总结

使用路由懒加载，我们就能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

使用分包，也可以让我们自定义将任何一个异步模块与相同的块名称组合到相同的异步块中，更服务我们的需求。