SvgChunkWebpackPlugin

svg-chunk-webpack-plugin は、Webpackのエントリーポイントに従って最適化されたSVGスプライトを作成します。各スプライトには、SVGファイルのコード分割を改善するために、そのエントリーポイントにリストされているSVG依存関係のみが含まれています。

このプラグインには、クリーンで最適化されたSVGスプライトを生成するための人気のある SVGO パッケージが含まれています。

コード分割は、ページで使用されていないコンテンツを含むファイルを配信しないための鍵となります。これはすでにCSS、JavaScriptで存在しており、このプラグインを使用することでSVGファイルでも実現できます。

このプラグインを使用するタイミング

複数ページアプリケーションでは、各ページには必要な依存関係のみを含める必要があります。言い換えれば、そのエントリーポイントとすべての依存関係によってインポートされたSVGファイルのみを含める必要があります。

再利用可能なコンポーネントを使用する場合、SVGはプロジェクト全体で重複していることがよくあります。 これで、グローバルなSVGライブラリを作成し、すべてのJavaScriptファイルがこのライブラリから任意のSVGを簡単にインポートできるようになりました。Webpackコンパイルのおかげで、エントリーポイントの依存関係は自動的に更新されます。

SketchやIllustratorなどのデザインソフトウェアでエクスポートされたSVGを扱う場合、そのソースコードは最適化されておらず、多くの場合、コメントやCSSクラスが含まれており、それらの間で競合が発生する可能性があります。このプラグインは、スプライトを作成する前に、すべてのSVGを自動的にクリーンアップします。

設定不要

このプラグインは、最適化された設定ですでに設定なしで動作します。高度な使用法については、構成の使用セクションを参照してください。

インストール

このプラグインは、npm および Github で svg-chunk-webpack-plugin という名前のパッケージとして入手できます。

npm install svg-chunk-webpack-plugin --save-dev

yarn add svg-chunk-webpack-plugin --dev

警告 svg-chunk-webpack-plugin@5 は ESM のみです。

注 サポートされる最小の Node.js バージョンは 16.20.0 で、Webpack は >=5.10.3 です。

例

このプロジェクトには、./example ディレクトリに最小限の例が含まれています。npm run build:example コマンドを実行してWebpackの例を実行し、プラグインの実装を実際に確認してください。

基本的な使い方

このプラグインは、各エントリーポイントに対して1つのSVGスプライトを生成します。スプライトは、他のすべてのアセットとともに、出力パスディレクトリに構築されます。各スプライトのファイル名は、そのエントリーポイント名で構成されます（以下の例では、home.svgになります）。

まず、ローダーとプラグインをWebpack構成に追加しましょう。

警告 ローダーとプラグインは連携して動作する必要があります。

webpack.config.js

import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin';

export default {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: SvgChunkWebpackPlugin.loader
          }
        ]
      }
    ]
  },
  plugins: [new SvgChunkWebpackPlugin()]
};

注

より柔軟性とパフォーマンス向上のため、インラインSVGファイルの方が優れています。HTTPリクエストが少なく、スタイルを変更するためのCSSプロパティも少なく、ページ読み込み中のちらつきもありません。

次に、必要なページにスプライトを含めます（*以下の例ではTwigを使用します*）。

home.html.twig

{{ include 'home.svg' }}

最後に、次の例のように、<use> タグでSVGを使用します。<svg_name> をSVG名（拡張子なし）に置き換えます。

home.html.twig

<svg>
  <use href="#<svg_name>"></use>
</svg>

構成の使用

ローダーとプラグインは、デフォルトの動作を上書きするための構成を受け入れます。

ローダー

ローダーの構成により、SVGO構成をカスタマイズできます。SVGOの最適化は、ビルドのパフォーマンスを最適化するために、ローダープロセス中に実行されます。

configFile

タイプ

type configFile = string | boolean;

デフォルト: path.resolve(opts.root, 'svgo.config.js')

カスタムの SVGO構成 を読み込むかどうかをローダーに指示します。カスタム構成は configFile: false で無効にできます。

webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: SvgChunkWebpackPlugin.loader,
        options: {
          configFile: './path/svgo.config.js'
        }
      }
    ]
  }
};

SVGOカスタム構成

SVGOには、SVGファイルを最適化するためのデフォルトのプリセットがあります。詳細については、svgoの構成方法を参照してください。

svgo.config.js

export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: {
            onlyMatchedOnce: false
          },
          removeViewBox: false
        }
      }
    },
    {
      name: 'convertStyleToAttrs'
    }
  ]
};

プラグイン

プラグインの構成により、スプライトの設定をカスタマイズできます。

filename

タイプ

type filename = string;

デフォルト: '[name].svg'

プラグインに、デフォルトのスプライトファイル名をカスタマイズするかどうかを指示します。プレースホルダー [name] は、エントリーポイント名に自動的に置き換えられます。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].svg'
    })
  ]
};

注 filename パラメーターは、Webpackのキャッシュプレースホルダーと互換性があります。 キャッシュセクションを参照してください。

svgstoreConfig

タイプ

type svgstoreConfig = object;

デフォルト: { cleanDefs: false, cleanSymbols: false, inline: true }

SVGスプライトは、svgstore パッケージを使用して構築されます。 svgstore ドキュメントで利用可能なオプションリストから、必要に応じてパラメーターを更新してください。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      svgstoreConfig: {
        svgAttrs: {
          'aria-hidden': true,
          style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
        }
      }
    })
  ]
};

注 LinearGradientの競合を避けるために、SVG定義を破壊する display: none プロパティを避けてください。

generateSpritesManifest

タイプ

type generateSpritesManifest = boolean;

デフォルト: false

プラグインに、sprites-manifest.json を生成するかどうかを指示します。 JSONファイルには、エントリーポイントに含まれるすべてのSVGのリストが含まれています。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      generateSpritesManifest: true
    })
  ]
};

generateSpritesPreview

タイプ

type generateSpritesPreview = boolean;

デフォルト: false

プラグインに、sprites-preview.html を生成するかどうかを指示します。 HTMLプレビューには、エントリーポイントに含まれるすべてのSVGの表示リストが、SVGの概要と名前とともに含まれています。例の スプライトプレビュー を参照してください。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      generateSpritesPreview: true
    })
  ]
};

キャッシュ

webpackのキャッシュを使用すると、ニーズに応じていくつかのプレースホルダーを利用できます。ページにインライン化されたSVGを使用する場合、このオプションは役に立ちません。

注

[contenthash] プレースホルダーは、スプライトのコンテンツに依存するため、最適なオプションです。キャッシュプレースホルダーはビルドのパフォーマンスにコストがかかるため、本番モードでのみ使用してください。

[contenthash]

[contenthash] プレースホルダーは、スプライトのコンテンツに基づいて一意のハッシュを追加します。スプライトのコンテンツが変更されると、ハッシュも変更されます。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].[contenthash].svg'
    })
  ]
};

[fullhash]

[fullhash] プレースホルダーは、すべてのビルドに対して生成された一意のハッシュを追加します。コンパイルビルドが更新されると、ハッシュも変更されます。

webpack.config.js

export default {
  plugins: [
    new SvgChunkWebpackPlugin({
      filename: '[name].[fullhash].svg'
    })
  ]
};

ライセンス

svg-chunk-webpack-plugin は、MITライセンス の下でライセンスされています。

@yoriiis によって♥で作成されました。