内联svg vs svg精灵vs多个外部文件

好的，我主要使用Laravel&Vue js构建一个web应用程序。我尝试使用，但导出的svg显示为空白

在继续之前，我开始怀疑这是否真的值得，我不确定

所以我的问题是，真正的区别是什么

假设我们不能使用图标字体，因为我们希望有多色SVG

• 甚至值得尝试使用一个包将SVG合并到一个sprite中，然后使用它，还是说它与http/2没有什么区别

• 考虑到文件大小和数据使用情况，是否值得尝试使用sprite而不是多个外部svg文件来尽量减少这方面的影响

• 将SVG内联也是一种选择，但这将显著增加dom大小

所以我想知道。。。有没有人尝试过所有这些技术，找出了最好、最有效的方法，以及它们的真正区别

最后，如果有人能告诉我为什么我的svg精灵显示为空白，那将是一个巨大的奖励：p

我已在我的webpack.mix中配置了上述软件包，如下所示：

const mix=require（'laravel-mix'）；
const SpriteLoaderPlugin=require（'svg-sprite-loader/plugin'）；
js（'resources/js/app.js'，'public/js'）
.sass（'resources/sass/app.scss'，'public/css'）
.webpackConfig({
模块：{
规则：[
{
测试：/resources\/images\/.\.svg$/,，
加载程序：“svg精灵加载程序”，
排除：/node_模块/，
选项：{
摘录：没错，
SpritFileName:'icons sprite.svg'，
publicPath:“图像/精灵/”，
}
}
]
},
插件：[
新的SpriteLoaderPlugin（{plainSprite:true}）//Sprites插件。
],
})
.version（）

甚至值得尝试使用一个包将SVG合并到一个sprite中，然后使用它，还是说它与http/2没有什么区别

这确实很重要，但取决于您的用例。您必须自己在生产环境中进行测试。当然，HTTP/2总是更好

考虑到文件大小和数据使用情况，是否值得尝试使用sprite而不是多个外部svg文件来尽量减少这方面的影响

答案与1相同。。用例。归结到估算（因为您无法计算）浏览器等待新内容的时间

GZip是数据使用的最重要因素

在低速3G连接上，为（大）文件添加自己的LZMA压缩可能会很有趣

将SVG内联也是一种选择，但这将显著增加dom大小

您仍然在发送相同的字节，只是在一个不同的文件中，这可能会更好，因为GZip处理一个文件中的所有内容

总的来说，我的建议是不要担心性能；这不是一个OR-OR决定

从单独的文件开始，只有在遇到性能问题时才重新考虑。
如果您期望性能问题，那么可以考虑重构

备选方案：创建SVG客户端 我更进一步。变成了一个我能跑多小/多快的实验：

• 将所有SVG修改为字符串符号
  成为

  c:20,20,5

• 在一个JS文件中使用
• 解析字符串客户端
• 创建SVG的步骤
• 在DataURI IMG src中使用

这在52个SVG文件中得到了550KB，在one自定义元素文件中得到了16KB

GZip是一个重要的因素！ GZip在将服务器端文件发送到客户端之前对其进行压缩

是的，缩小很重要，但缩小可能会对GZip压缩产生负面影响

很久以前的好读物：

它解释了为什么

是坏的，

是好的

---

SVG文件也是如此：

Ok，如果我理解正确的话：-如果我们讨论的是一个动态生成多个SVG的过程，那么SVG内联从来都不是最好的解决方案，因为它与使用单独的文件几乎相同，但会增加dom大小。-Sprite在性能方面总是更好的，但是应该评估实现时间是否值得。-应该通过反复试验来进行，因为实际上不可能评估它是否值得。如果我将来想实现服务器端渲染，您建议的技术是可行的方法吗？TY只有当你为许多用户服务并且流量有（显著的）价格时，这种选择才值得付出努力。在一个HTML文件或一个带有符号的SVG文件中内联没有区别，它们只是不同文件中的相同字节。添加SSR时没有差异。对于一切：人们认为这是关于缩小文件；事实并非如此，这完全是关于GZip的：我想可能会有关于缓存的争论。我猜当文档的缓存由于任何原因而失效时，内联svg通常是加载程序，而如果您引用的是单独的缓存svg文件。（免责声明：我还没有接受过关于完整缓存周期的教育）。如果我们认为我们可能会有一些SVG经常重复自己（例如，某个实体有一个页面，使用同一个SVG来显示一些指示），那么你会回答变化吗？是的，然后还有客户端缓存（甚至可能使用LoalStore存储内容）和服务器端缓存。你说重复很多次，然后坚持一个文件。。。因为缓存是最重要的部分。这是关于思考每个字节在哪里/如何/何时传输的问题。。但最终，Nike的做法是：只管去做。。开始发展。