vite依赖预构建-解决路由跳转重新加载页面

vite项目内路由跳转，有时候会直接刷新整个页面，此时终端会出现加载新的依赖优化项提醒

vite有一个依赖预构建的功能，每次启动项目时，vite在本地加载站点之前预构建了项目依赖，并且依赖会缓存在node_modules/.vite 目录下。
如果没有找到现有的缓存，vite会扫描源代码，并自动寻找引入的依赖项（即 "bare import"，表示期望从 node_modules 中解析），并将这些依赖项作为预构建的入口点。在服务器已经启动后，如果遇到尚未在缓存中的新依赖项导入，则vite将重新运行依赖项构建过程，并在需要时重新加载页面。
所以路由跳转时页面整体刷新是因为依赖预构建导致的，在项目启动的过程中，vite会先从浏览器缓存寻找并读取浏览器缓存，若浏览器缓存没有则地区本地缓存(node_modules/.vite)并按需加载。当你在跳转的过程中遇到未预构建新依赖，vite会重新运行依赖预构建过程，并在需要时重新加载页面。
这种情况尤其需要注意，当你禁止浏览器缓存时就必须将对应模块加载到依赖预构建，否则跳转时会频繁出现页面刷新的问题，因为它无法在浏览器缓存也没有在本地node_modules/.vite内缓存。
解决方法
在vite.config.ts中新增optimizeDeps配置项

import { defineConfig } from "vite";
import { include,exclude } from "./build/optimize";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    // server: {},
    // 省略其它...

    // 依赖预构建
    optimizeDeps: {
      include,
      exclude
    },
    
    // build: {}
  };
});

在根目录新建build文件夹，该文件夹内部新建optimize.ts文件

/**
 * https://cn.vitejs.dev/config/dep-optimization-options#optimizedeps-exclude
 * 在 Vite 的配置文件 vite.config.ts 中，optimizeDeps 选项用于配置依赖优化，特别是预构建步骤，以提高开发和构建性能。
 * 正确选择需要预构建的依赖可以显著提高开发和构建性能，但并不意味着所有依赖都必须被预构建。
 */
const include = [
  "qrcode",
  "jsbarcode",
  "vuedraggable"
];

/**
 * 在预构建中强制排除的依赖项
 * 如果你有某些依赖包不希望被预构建，可以使用 exclude 属性来排除它们。
 */
const exclude = ["@iconify-icons/ep"];

export { include, exclude };

如果使用的第三方库是全局引入，也就是src/main.ts文件里，那么它就会自动被vite缓存到node_modules/.vite，此时就不用将该第三方库做依赖预构建(添加到include内)。

---

参考文档：
依赖预构建：https://cn.vitejs.dev/guide/dep-pre-bundling.html
依赖优化选项：https://cn.vitejs.dev/config/dep-optimization-options#optimiz...