SVG ファイルのバンドルによる成果物のサイズ増加を防ぐ対策
累計閲覧数 58 PV
まとめ
- SVGを動的にロードしDOMとしてマウントする
原因
img、objectタグでSVGを参照するとShallow DOMとなりJavaScriptやCSSでの操作ができない
対策
- SVGを動的にロードしてJavaScript、CSSが適用可能な状態にする
- Reactの場合、react-inlinesvgを利用する
対策の動機
- 成果物のファイルサイズを減らす
導入方法
- 静的ファイルをホストにアップロードする必要がある
継続方法（運用）
- 初期表示で絶対に必要なSVG以外は非同期読み込みできるようにする
対策の問題点
- 同期的に読み込まない場合スケルトンスクリーンを用意する必要がある
展望
- 特になし