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

最新推荐文章于 2025-09-06 07:32:19 发布
原创 最新推荐文章于 2025-09-06 07:32:19 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

文章比较了Vue3项目中全局引入Element-Plus的Icon库与按需引入的方式对包体积的影响，发现按需引入显著减小了体积。作者质疑全局引入除了便利性外是否有必要。

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

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

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

页面中使用几个icon

vite打包大小

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

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

打包结果

三、结论

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

Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
🏆 前端领域优质创作者
09-08 8461
vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme
《Vue3笔记》第10节：Vue3项目引入Element Plus图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-27 544
这篇文章基于之前的项目代码之上，介绍Vue3项目中如何引入Element Plus的图标库组件。
从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify
immocha的博客
05-15 5939
iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。除了使用Element Plus自带的图标，iconify是本次尝试的主要目的。
Element-Plus
最新发布
weixin_52943021的博客
09-06 647
【代码】Element-Plus。
elementUI在按需加载的情况下更换主题样式
qq_43340606的博客
12-08 1398
一. 全局加载和按需加载的对比 1. 全局引入elementUI后, 打包后css的体积: 其中, chunk-vendors.css打包的是第三方库的样式, 36.22kb, chunk-common.css打包的是全局的公共样式 2. 按需导入elementUI组件后, 打包后css的体积为27.67kb 对比之后, css的体积缩小了8.5kb左右, js的体积也会相对减少, 这样的好处就是提升性能, 减少内存 二. 按需加载的步骤 tips: 按照elementUI...
4、icon图标安装及布局引入
weixin_51915021的博客
05-07 1596
Vue3 + .net core6 WebAPI前后端分离
Vue3中element-plus全局使用Icon图标
热门推荐
yuliwen0418的博客
11-23 2万+
Vue项目中使用Element-plus的Icon图标 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app = createA
Vue中全局导入和按需导入的区别
weixin_30786617的博客
04-30 1029
export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store import store from './store/store' //全局导入Vuex模块 一：按需导入和按需导出 二：全局导出Vuex模块，和全局导入Vuex模块...
VUE3 学习笔记（13）：VUE3 下的Element-Plus基本使用
众纳百川的博客
06-04 823
UI是页面的门面，一个好的UI自然令人赏心悦目；国人团队开发的ElementUI在众多UI中较为常见，因此通过介绍它的使用让大家更好的了解第三方UI的使用。
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
04-12 1094
Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标 】(十六)-全面详解（学习总结---从入门到深化）
vue3.0 使用element-plus 按需自动导入
iijik55的博客
03-09 644
一、element-plus 安装 npm install element-plus --save // 按需自动导入 npm install -D unplugin-vue-components unplugin-auto-import 二、vue.config.js 配置 const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webp
使用Visual Studio Code引入Element UI全局引用与按需引用对比
ava_jpp的博客
06-08 1502
首先参考之前文章Visual Studio Code引入Element UI（详细小白版）https://blog.csdn.net/ava_jpp/article/details/125173433?spm=1001.2014.3001.5501创建好项目后，在控制台输入 进入到这个项目路径下，后在控制台输入 这里的也等于当出现以下格式，代表依赖下载成功接下来点开我们项目中里的文件来引入 首先，输入以下代码来引入以及的样式文件 接下来将全局注入到项目中，输入以下代码 整体请参考下图 然后
Vue3 ElementPlus 更加优雅的使用Icon
CRMEB小程序商城的博客
03-03 1万+
前言 这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。
vue全局导入和按需导入Element-puls
weixin_49352307的博客
03-12 924
在components下创建一个组件命名大驼峰。其他组件直接引用中间加-
element-ui 全部导入与按需导入
kiku
05-18 1万+
element-ui 有两种使用方法：一种是（默认）全部导入，还有就是根据自己需要按需导入。 如何进行选择，这里提供一个简单方法： 主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样 一、全部导入 全局导入 在mian.js中导入（在vue项目中）： import Vue from 'vue'; import ElementUI from 'element-ui'; // 导入 elementUI import 'element-u
在vue3项目中引入element-plus的Icon图标
weixin_44775694的博客
05-21 1万+
Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库，包含丰富的基础组件。官方网址为：一个 Vue 3 UI 框架 | Element Plus 在Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单等，接下来是引入在vue3项目中引入Icon图标的步骤。 安装（使用包管理器）： # 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ y...
vue——Element-plus-Icon和SvgIcon
weixin_61974247的博客
08-11 960
首先，你要有一个自己的SvgIcon图标库，这个可以在网上搜，一般只要不用百度，还都是可以搜到的（为什么，你们自己懂）将这个文件夹导入项目中，如下所示：然后，打开main.js，导入图标，并进行全局注册加入一个SvgIcon组件，用于我们使用图标，这个组件就代表我们使用的图标，只不过是根据名字进行图标选择，如下：组件的代码如下：icon : {icon : {icon : {icon : {icon : {icon : {
Vue 3 项目中 Element Plus 按需引入优化打包
paper_umbrella的博客
06-26 1746
通过以上步骤，我们成功地将 Element Plus 从全局引入修改为按需引入，避免不必要的库文件打包进最终的项目中，从而减小打包体积。这样可以提高项目性能并加快页面加载速度。希望本文对您有所帮助！如有任何问题或疑问，请随时联系我。祝您的项目开发顺利！🚀👩‍💻🌟。
vue3使用element-plus的icon图标
2303_76675983的博客
05-12 1982
这是因为从 Element Plus 2.0 开始，图标被拆分到了单独的包中。使用：直接点击element-plus文档中的图标，点击复制。1.已知：已安装element-plus，直接安装icon库就行。在 Vue 3 项目中使用。在main.js文件中添加。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值