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.jsonscripts.build 改为 vite build --config vite.build.js,这样就可以实现 dev 时使用完整引入ElementPlus,build 时使用自动导入减少编译文件的大小。