Skip to main content

SVG ファイルのバンドルによる成果物のサイズ増加を防ぐ対策

まとめ

  • SVGを動的にロードしDOMとしてマウントする

原因

  • imgobjectタグでSVGを参照するとShallow DOMとなりJavaScriptやCSSでの操作ができない

対策

  • SVGを動的にロードしてJavaScript、CSSが適用可能な状態にする
  • Reactの場合、react-inlinesvgを利用する

対策の動機

  • 成果物のファイルサイズを減らす

導入方法

  • 静的ファイルをホストにアップロードする必要がある

継続方法(運用)

  • 初期表示で絶対に必要なSVG以外は非同期読み込みできるようにする

対策の問題点

  • 同期的に読み込まない場合スケルトンスクリーンを用意する必要がある

展望

  • 特になし

参考資料