解决vite开发时使用vant自动引入组件导致的二次构建

前言

当我在vite中使用vant的自动引入组件后，在开发时会经常碰到以下提示：

17:33:46 [vite] ✨ new dependencies optimized: vant/es/button/style/index                                                                             
17:33:46 [vite] ✨ optimized dependencies changed. reloading  

然后页面就会刷新，特别难受，去了解了一下为什么会这样？

为了防止在启动时占用大量编译时间，vite只会处理一些常用的组件和依赖，特别是在按需加载的时候，加上vite本身就会忽略node_modules中的内容，这就导致一些按需的依赖会在开发进入到对应页面时才会处理，从而导致一直在处理依赖优化和reloading。

非常难受，增加了大量等待时间。

目前官方没有提供优质的解决办法，但是我看到了有人提供了一种做法，就是既然你按需优化，那我在开发的时候直接让你全局加载优化项即可。

通过分析，vant的优化触发全是style样式加载，那么我们就让他开发模式把所有组件的样式全优化了，以此避免出现这个reloading。

教程

vite.config.ts

import { defineConfig, loadEnv} from "vite";
import { resolve } from "path";
import { readdirSync, statSync } from "fs";

export default ({ mode }) => {
    process.env = { ...process.env,...loadEnv(mode, process.cwd())}; //生成包括自定义的环境变量


    //解决optimized dependencies changed. reloading
    const devOptimizeDepsInclude: Array<string> = [];
    if (process.env.VITE_ENV === "development") {
        const excludedDirs = ["utils", "style", "composables"];
        const vantPath = resolve(__dirname, "./node_modules/vant/es");
        const dirNames = readdirSync(vantPath);
        dirNames
            .filter((dirName) => {
                const isDir = statSync(`${vantPath}/${dirName}`).isDirectory();
                const isExcluded = excludedDirs.includes(dirName);
                return isDir && !isExcluded;
            })
            .forEach((dirName) => {
                devOptimizeDepsInclude.push(`vant/es/${dirName}/style/index`);
            });
    }


    return defineConfig({
        optimizeDeps: {
            include: [...devOptimizeDepsInclude]
        },
    })
};

excludedDirs排除非组件目录，让将所有的组件目录全部push到devOptimizeDepsInclude数组中，然后在optimizeDeps.include导入即可。

至此问题解决，期待以后能有更好的办法。

更加省事的配置

我发现除了include选项，还有一个exclude选项，如果使用include会导致地址精度匹配非常之高，所以上面不得不通过node的fs去读取对应的目录来生成准确的地址。

但是如果使用exclude，就可以很粗暴的直接使用插件名了，这样这个插件就不会使用时再编译了。

optimizeDeps: {
    exclude: ["vant", "@vant/use"]
},

非常省事，哈哈！