项目中使用了比较常见的svg封装方式，如下图所示
打包之后入口js文件比较大，1.5MB,点开一看好像把很多svg都编码进去了
这会影响到首屏加载速度吧，我希望svg进入页面之后再按需加载，怎么优化呢
项目中svg-icon使用过多，导致webpack打包之后，main.js体积多大，怎么优化?
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
1条回答 默认 最新
- 2023-12-26 19:36ChuXiaos的博客 icon-class传入的就是svg目录下文件的文件名，比如目录之放一个有个goBack.svg文件，我们就可以按照下面的方式使用。也可以传入路径或者图片链接的方式，当然这种方式上面vue2对应的组件没有进行封装，感兴趣的小...
- 2022-11-24 16:18偏向明知山的博客 如何在vue项目中使用svg图标，并将其封装成组件，不需要导入样式文件，只需要将svg格式的图标放进指定文件
- 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 │ └─...
- 2022-03-29 11:25sweet202005的博客 以下介绍的是vue项目中对svg-icon图标的使用流程 安装使用loader npm i --save-dev svg-sprite-loader@6.0.9 修改webpack配置 在vue.config.js中修改完webpack配置之后，要重启项目 const path = require('path') ...
- 2021-05-13 09:54I`M程序员天花板的博客 需要在代码里添加图标标签 <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" ...svg-icon slot="prefix" icon-class="password" /> </el-input> 在用户名或者密码前图标
- 2021-08-11 20:08Yee烊的博客 首先，我们先了解一下什么是SVG格式 百度百科：SVG格式 SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web ...
- 2024-06-18 13:51flying_chick的博客 vue项目引入svg图片
- 2021-01-23 17:06mole的博客 在Vue中使用svg-icon，可以按如下配置即可。 1、src/components/SvgIcon目录下创建index.vue，代码如下： <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :...
- 2019-03-13 13:47PrayerFaith-Depart的博客 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
- 2022-12-07 11:41学前端搞口饭吃的博客 vue cli3 webpack精讲
- 没有解决我的问题, 去提问
问题事件
创建了问题
8月1日