svg - インライン svg と svg スプライトと複数の外部ファイル

Question

OKなので、主にLaravelとVue jsを使用してWebアプリを構築しています。https://github.com/JetBrains/svg-sprite-loader#installationを使用しようとしましたが、エクスポートされた svg が空白で表示されます。

先に進む前に、そのコンテキストで、これが本当に価値があるかどうか疑問に思い始めました.tbh、わかりません.

だから私の質問は、実際の違いは何ですか?

多色の svg が必要なため、アイコン フォントを使用できないと仮定しましょう。

• パッケージを使用して svgs をスプライトにマージしてから使用する価値はありますか、それとも http/2 と実際に違いはありませんか?

• ファイル サイズとデータ使用量を考慮すると、複数の外部 svg ファイルの代わりにスプライトを使用して、この側面を最小限に抑えることは価値がありますか?

• svgs をインライン化することもオプションですが、これにより dom サイズが劇的に増加します。

だから私は疑問に思っています...誰かがこれらすべてのテクニックを試して、最高で最もパフォーマンスの高いものを見つけ出し、それらの本当の違いは何ですか.

最後に、私の svg スプライトが空白と表示される理由について誰かが私に意見をくれたら、それは大きなボーナスになるでしょう :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()