ElementPlus 开发 SPA 应用 dev 模式加载太慢的原因及解决办法

问题复现

开发 SPA 应用用到 ElementPlus，官方推荐用 自动导入 方式来引用。

如果你用笔记本开发，那么预览时 js 的加载速度会极慢，node 占 CPU 超过100%，非常影响开发体验，恨不得换到 MPA 模式开发。

原因

因为自动自动导入方式预览时，要加载一百多个js文件。如果你用的是强劲的台式机，用这个方式没发现有明细的卡。笔记本 CPU 顶不住。

解决办法

用 完整引入 或 按需导入 就没这个问题。

建议使用 完整引入 方式，ElementPlus 相关 js 就只引入了一个 /node_modules/.vite/deps/element-plus.js，而不是自动导入的上百的js文件。

编译后 element-plus 后的 js gz 后需要多传输 100k 左右，如果你受不了，可以另外加一个自动加载的 vite 配置，在增加一个创建不用全局引入 ElementPlus 的入口文件给 vite 引用。

如：build 时使用 vite.build.js 配置，在 vite.build.js 中引用使用 自动导入 的js入口文件。再把 package.json 的 scripts.build 改为 vite build --config vite.build.js，这样就可以实现 dev 时使用完整引入ElementPlus，build 时使用自动导入减少编译文件的大小。