记录vue-router打包优化（懒加载、分包方式）

在使用vue-router时，对路由配置打包的一些方法和问题的记录

未优化的打包方式

路由文件:

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
import Home from "../page/Home.vue"
import About from "../page/About.vue"
// 配置路由规则
const routes = [
    {path: '/', redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/about', component: About }
]
// 创建路由对象
const router = createRouter({
    routes,
    history: createWebHistory(), // 指定history模式

})
export default router

如果我们使用上面这种配置模式打包的话，最终我们路由文件引用的单文件组件都会全部被打包在一起一个文件

这样子的话，我们浏览器一打开这个组件页面时，它就要把这个非常大的包加载完，这是非常不理想的状态。

那么要怎么解决这个问题呢? vue-router官方推荐我们用赖加载的形式来加载这些单文件组件。

优化后的打包方式

在优化前，我们要先理解一下import()动态导入时最终返回的是一个promise对象:
关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

我们来修改一下路由文件:

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

// 懒加载配置模式
const routes = [
    {path: '/', redirect: '/home'},
    // 这里的component配置为返回一个promise的方法
    { path: '/home', component: () => import("../page/Home.vue")},
    { path: '/about', component: () => import("../page/About.vue") }
]
// 创建路由对象
const router = createRouter({
    routes,
    history: createWebHistory(), // 指定history模式

})
export default router

我用的是vite打包，所以打包后的文件都会自动添加上文件名字，如果用的是vue-cli打包的话，需要用到wepack的一个magic comments (魔法注释)

vue-cli在配置时， 加上这个固定的注释方式:

// 懒加载配置模式
const routes = [
    {path: '/', redirect: '/home'},
    { path: '/home', component: () => import(/* webpackChunkName: "myHome" */"../page/Home.vue")},
    { path: '/about', component: () => import(/* webpackChunkName: "myAbout" */"../page/About.vue") }
]

打包后我们的文件都已经被拆分开来，这样子我们可以进行加载时做一些优化。显示当前单组件页面时，该组件的包加载完后再去加载其他包。这就是分包优化的一种。