当您在使用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 } 标签:index,style,element,reloading,optimized,dependencies,plus,components,es From: https://www.cnblogs.com/ycb715/p/18604936