项目中svg-icon使用过多，导致webpack打包之后，main.js体积多大，怎么优化?

项目中使用了比较常见的svg封装方式，如下图所示

打包之后入口js文件比较大，1.5MB,点开一看好像把很多svg都编码进去了

这会影响到首屏加载速度吧，我希望svg进入页面之后再按需加载，怎么优化呢

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
一起看海呦 2023-08-02 14:00
关注
使用 SVG 精灵技术

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

使用webpack -v 4.39.3打包的项目在本地打开是空白 javascript webpack 前端
2021-12-22 11:14

回答 1 已采纳打开本地服务器,把dist文件下的文件放在WWW目录,在通过http://localhost/打开
node.js 如何将前端传来用svg图片转成的base64字符串再转成svg图片 node.js
2022-06-30 22:35

回答 3 已采纳 const fs = require('fs'); const base64str = fs.readFileSync('./任意文件svg也行.png').toString('base64');
hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？ html5 vue.js 前端
2023-03-29 10:47

回答 3 已采纳该回答引用ChatGPT问题一：让字体跟画布同比例大小要让字体跟画布同比例大小，可以使用CSS的`vw`和`vh`单位，它们是相对于视口宽度和高度的单位，可以根据视口大小自动调整元素大小。具体实现方法
【Vue3】在Vue项目中如何使用svg-icon组件（Webpack）
2022-11-24 16:18

毛毛三由的博客如何在vue项目中使用svg图标，并将其封装成组件，不需要导入样式文件，只需要将svg格式的图标放进指定文件
项目开发前端性能优化? css javascript 缓存
2021-09-27 21:16

回答 1 已采纳 gzip
Svgedit编辑器集成vue项目上使用 javascript 前端
2023-03-07 13:22

回答 3 已采纳小魔女参考了bing和GPT部分内容调写:要想在vue项目中使用svgedit编辑器，首先需要安装svgedit编辑器的依赖包，可以使用npm安装： npm install svgedit 然后在v
自己用webpack构建vue项目报错，求帮助万分感谢 npm vue.js webpack
2018-10-17 01:26

回答 1 已采纳是webpack版本问题
如何优雅的封装svg-icon并运用到项目中（webpack和vite）
2023-12-26 19:36

ChuXiaos的博客 icon-class传入的就是svg目录下文件的文件名，比如目录之放一个有个goBack.svg文件，我们就可以按照下面的方式使用。也可以传入路径或者图片链接的方式，当然这种方式上面vue2对应的组件没有进行封装，感兴趣的小...
后端返回的svg前端如何自适应 css html vue.js 有问必答
2021-10-14 17:31

回答 3 已采纳设置百分比。
vue 启动报错in ./src/components/HeaderSearch/index.vue javascript vue.js 前端
2022-02-22 01:16

回答 2 已采纳 ::v-deep 这样试试对你有用的话，请点击一下【采纳此答案】，谢谢🌹
如何在node.js中加载Google Charts？ node.js php
2012-12-29 09:09

回答 1 已采纳 It wasn't the ideal solution, but I found an alternative to node.js for accomplishing the same end
vue@2 使用 svg-icon：webpack + svg-sprite-loader
2022-05-28 23:04

彭世瑜的博客 vue@2 使用 svg-icon：webpack + svg-sprite-loader 项目结构 $ tree -I node_modules . ├── README.md ├── package.json ├── pnpm-lock.yaml ├── public │ ├── index.html │ └── libs │ └─...
element-ui的dialog对话框中放了svg标签用来显示条码，第一次弹出对话框条码不显示问题 java vue.js
2021-04-19 14:46

回答 2 已采纳应该是第一次还没加载完就打开dialog需要加个定时器延时https://blog.csdn.net/lijiabinbbg/article/details/93186814 还有就是nextTick
vue项目中svg图标的使用svg-icon
2022-03-29 11:25

sweet202005的博客以下介绍的是vue项目中对svg-icon图标的使用流程安装使用loader npm i --save-dev svg-sprite-loader@6.0.9 修改webpack配置在vue.config.js中修改完webpack配置之后，要重启项目 const path = require('path') ...
Vue项目中svg-icon组件的基本使用
2021-08-11 20:08

Yee烊的博客首先，我们先了解一下什么是SVG格式百度百科：SVG格式 SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web ...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 8月1日

悬赏问题

¥15 算法: 在随机数量点中找到两条长度最相似且不交叉的线
¥15 三分类机器学习模型可视化分析
¥15 本地测试网站127.0.0.1 已拒绝连接，如何解决？(标签-ubuntu)
¥50 Qt在release捕获异常并跟踪堆栈(有Demo，跑一下环境再回答)
¥30 python，LLM 文本提炼
¥15 关于将inet引入的相关问题
¥15 关于一个倒计时的操作和显示设计
¥15 提问STK的问题，哪位航天领域的同学会啊
¥15 苹果系统的mac m1芯片的笔记本使用ce修改器使用不了
¥15 单相逆变的电压电流双闭环中进行低通滤波PID算法改进

项目中svg-icon使用过多，导致webpack打包之后，main.js体积多大，怎么优化?

1条回答 默认 最新

问题事件

悬赏问题

1条回答默认最新