3

好的,所以我主要使用 Laravel 和 Vue js 构建一个 Web 应用程序。我尝试使用https://github.com/JetBrains/svg-sprite-loader#installation但导出的 svg 显示为空白。

在继续之前的那种情况下,我开始怀疑这是否真的值得,我不确定。

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

假设我们不能使用图标字体,因为我们想要多色的 svg。

  • 是否值得尝试使用一个包将 svgs 合并到一个 sprite 中然后使用它,或者它与 http/2 并没有真正的区别?

  • 考虑到文件大小和数据使用情况,是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面?

  • 内联 svgs 也是一种选择,但这会大大增加 dom 的大小。

所以我想知道......有没有人尝试过所有这些技术并找出最好和最高效的技术以及它们的真正区别是什么。

最后,如果有人能给我一些关于为什么我的 svg sprite 显示为空白的输入,那将是一个巨大的奖励:P

我已经在我的 webpack.mix 中配置了上面的包,如下所示:

const mix = require('laravel-mix');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /resources\/images\/.*\.svg$/,
                    loader: 'svg-sprite-loader',
                    exclude: /node_modules/,
                    options: {
                        extract: true,
                        spriteFilename: 'icons-sprite.svg',
                        publicPath: 'images/sprites/',
                    }
                }
            ]
        },
        plugins: [
            new SpriteLoaderPlugin({ plainSprite: true}) // Sprites Plugin.
        ],
    })
    .version()

4

1 回答 1

1

是否值得尝试使用一个包将 svgs 合并到一个 sprite 中然后使用它,或者它与 http/2 并没有真正的区别?

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

考虑到文件大小和数据使用情况,是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面?

答案与 1 相同。用例。归结为估计(因为您无法计算)浏览器 A 必须等待新内容的时间。

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

在慢速 3G 连接上,为(大)文件添加您自己的 LZMA 压缩可能会很有趣。

内联 svgs 也是一种选择,但这会大大增加 dom 的大小。

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

一般来说,我的建议是不要担心性能;这不是 OR-OR 决定。

从单独的文件开始,只有在遇到性能问题时才重新考虑。如果您预计会出现性能问题
,可能会在开发时考虑重构。

替代方案:创建SVG 客户端

我又进了一步。成为一个实验,我可以走多小/多快:

  • 将所有 SVG 重做为字符串表示<circle cx='20' cy='20' r='5'/>c:20,20,5
  • 在一个 JS 文件中使用
  • 解析字符串客户
  • 创建 SVG
  • 在 DataURI IMG src 中使用

这将52 个 SVG 文件中的550 KB降至一个自定义元素文件中的16 KB

而GZip是一个重要因素!

GZip 在将服务器端文件发送到客户端之前对其进行压缩。

是的,缩小很重要,但缩小会对GZip 压缩产生负面影响。

很久以前的好书:

https://encode.su/threads/1889-gzthermal-pseudo-thermal-view-of-Gzip-Deflate-compression-efficiency

它解释了为什么<!DOCTYPE HTML>不好,为什么<!doctype html>好。

这同样适用于 SVG 文件:<circle ...优于<CIRCLE ...

<circle fill='...' cx='20' .../>好于<circle cx='20' ... fill='...'/>

因为 GZip 发现了更长的重复模式<circle fill='

于 2020-05-13T08:19:47.560 回答