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 时使用自动导入
减少编译文件的大小。