optimized dependencies changed. reloading

当您在使用vite + vue3 + element-plus开发项目时，是否也遇到过控制台提示：optimized dependencies changed. reloading，然后整个应用重新被编译，新打开一个页面好慢好慢的情况。

 

14:27:31 [vite] ✨ new dependencies optimized: element-plus/es/components/table-column/style/index, element-plus/es/components/link/style/index, element-plus/es/components/icon/style/index, element-plus/es/components/form-item/style/index, element-plus/es/components/select/style/index, element-plus/es/components/option/style/index, element-plus/es/components/container/style/index, element-plus/es/components/loading/style/index, element-plus/es/components/pagination/style/index, element-plus/es/components/table/style/index, element-plus/es/components/dialog/style/index, element-plus/es/components/divider/style/index, element-plus/es/components/button/style/index, element-plus/es/components/form/style/index, element-plus/es/components/input/style/index, element-plus/es/components/radio-group/style/index, element-plus/es/components/radio/style/index, element-plus/es/components/card/style/index, element-plus/es/components/message-box/style/index, element-plus/es/components/header/style/index, element-plus/es/components/aside/style/index, element-plus/es/components/popconfirm/style/index, element-plus/es/components/tooltip/style/index, element-plus/es/components/tag/style/index, element-plus/es/components/image/style/index, element-plus/es/components/switch/style/index, element-plus/es/components/main/style/index, element-plus/es/components/scrollbar/style/index, element-plus/es/components/menu/style/index, element-plus/es/components/popover/style/index, element-plus/es/components/sub-menu/style/index, element-plus/es/components/menu-item/style/index, element-plus/es/components/drawer/style/index, element-plus/es/components/row/style/index, element-plus/es/components/col/style/index
14:27:31 [vite] ✨ optimized dependencies changed. reloading

 

出现这种情况，是因为新打开的页面依赖的element-plus的组件还没有被预构建造成的，这时vite会启动依赖预构建，以便下次用到这些组件时更快。所以整个项目被重新加载了。

解决办法：

1、在您的项目中安装 fs 

2、想办法让vite事先对element-plus的所有组件进行依赖预构建，在vite.config.js中

 

    import fs from 'fs'

   ……

 

    let optimizeDepsElementPlusIncludes = ["element-plus/es"];    //注意，是let，不是const

    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) {

          let path = `element-plus/es/components/${dirname}/style/css`;

          optimizeDepsElementPlusIncludes.push(path);

          console.log(`将强制对${path}进行依赖预构建`);

        }

      }

    );

    //注意，一定要包含下面这部分

    fs.access(

      `node_modules/element-plus/es/components/${dirname}/style/index.mjs`,

      (err) => {

        if (!err) {

          let path = `element-plus/es/components/${dirname}/style/index`;

          optimizeDepsElementPlusIncludes.push(path);

          console.log(`将强制对${path}进行依赖预构建`);

        }

      }

    );

  });

 

 

optimizeDeps:{　　

    include:optimizeDepsElementPlusIncludes

}