vite项目优化----- 解决终端optimized dependencies changed. reloading问题-526互联

写在前面
网上都说vite要比webpack快，但个人感受，默认情况下, vite项目的启动确实比webpack快，但如果某个界面是首次进入，且依赖比较多/比较复杂的话，那就会比较慢了。

这篇文章就是用来记录，关于vite慢的相关问题与可能的解决方案

为什么说vite快？为什么说vite慢？
只说vite快那太过笼统，但vite项目的启动确实是快（注意这里的启动是指命令行启动完毕，不是指启动完之后首页加载完毕）

启动完之后，你打开首页，你可能就不一定觉得vite快了（我之前就时常在自我怀疑，是不是我vite的打开方式不对，怎么这么慢？？？？），如果依赖的资源比较多，那速度有时慢的感人

可以简单的认为，vite之所以启动快，是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理，剩余的工作都交给浏览器，以及运行时进行依赖分析，动态打包，动态引入

我这边刚开始启动是正常的，后来配置了环境变量，选择了自定义模式启动，然后就不正常了，开发环境首次启动老是reloading，生产环境就没这个问题

终端一直这样，后来想了想可能是自定义模式启动导致的也可能是自定义模式导致按需引入插件特别慢

然后我这边的解决思路是让这些文件强制预构建，这里要用到vite的optimizeDeps.include

接下来我们只需要在node_modules中找到我们需要预构建的包就可以了，一般都是按需引入的包特别慢，所以只需要根据终端的提示在vite.config写一些查询的代码找到这些包即可

import fs from 'fs';

const optimizeDepsElementPlusIncludes = ["element-plus/es", '@vuemap/vue-amap/es']
  fs.readdirSync("node_modules/element-plus/es/components").map((dirname) => {
    fs.access(
      `node_modules/element-plus/es/components/${dirname}/style/css.mjs`,
      (err) => {
        if (!err) {
          optimizeDepsElementPlusIncludes.push(
            `element-plus/es/components/${dirname}/style/css`
          )
        }
      }
    )
  })

我这里除了element的包还有一个vueamap的组件也是用到了按需引入的插件这里大伙根据自己的需求来查询即可

下边放一下完整的代码