VUE3项目element-plus的icons全局引入和按需引入的打包比较

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第1张图片

最近又搞vue3项目了,不太情愿的使用element-plus,看到官网上使用icon只有全局循环注册所有icon的配置,很奇怪,不会增大包体积么,简单测试下.

新建两个项目都是全局引入element-plus(懒得设置按需导入,官网有简单)

一、全局引入@element-plus/icons-vue所有icon

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第2张图片

页面中使用几个icon

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第3张图片

vite打包大小

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第4张图片

二、按需引入icon的同样的初始化项目

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第5张图片

在组件文件内引入icon和使用同样icon

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第6张图片

打包结果

VUE3项目element-plus的icons全局引入和按需引入的打包比较_第7张图片

三、结论

打包生成的index.js文件大了1034.41k-861.17k = 173.24k
所以按需引入icons,包体积更小呀!全局导入除了方便点还有啥特别之处?

你可能感兴趣的:(Vue3.X,ElementPlus,vue.js,javascript,前端)