HRBrain Fly High #4 -Frontend-にて使用した資料
Breaking Up withSVG-in-JS
View Slide
自己紹介大学法政大学経済学部 4年趣味サウナ、キーボード
はじめにkurtextremさんのBreaking Up with SVG-in-JS in 2023という記事の内容を参考にさせていただきましたhttps://kurtextrem.de/posts/svg-in-js
Background
これまでのSVG-in-JSの扱い方
import React from 'react';import Icon from "./Icon.svg";const Test = () => {return }
import * as React from "react"const Svg = (props) => ()export default Svgimport React from 'react';import Svg from ".svg";const Test = () => {return }SVGR
なぜ SVG-in-JS はアンチパターンなのか
SVG要素は、Javascriptコードの一部として存在することがあるバンドルサイズが大きくなるほど、Javascriptがパースとコンパイルにかけるコストが大きくなる。大量のSVG要素が読み込まれる場合、パフォーマンスに影響パース&コンパイル
SVG-in-JS SVG-in-HTMLSVGがReactコンポーネントとして存在するため、Reactのレンダリングプロセスに含まれるSVGは直接HTMLに含まれるため、Reactのレンダリングプロセスに含まないレンダリング
JS bundle から SVGs を取り除くベストプラクティス
import React from 'react';import Icon from "./Icon.svg";const Test = () => {return }Using to load the SVG
パフォーマンス vs ユーザーエクスペリエンスimgタグを使用する方法● ページが最初にダウンロードされたときに、アイコンのレンダリングで、ちらつきが生じる● CSSを使ってスタイルを設定できない
SVG sprites – using heart icon
SVG sprites – using メモリ使用量の削減:SVGスプライトと要素を使用すると、一つのSVGイメージを定義し、その定義を再利用して同じイメージを複数の場所で表示することができる。 メモリ使用量が削減される。
SVG sprites – using JavaScriptバンドルのサイズ削減:SVGスプライトを使用すると、SVGイメージはJavaScriptバンドルの一部ではなく、独立したSVGファイルとして存在する。 JavaScriptバンドルのサイズが削減される。
SVG sprites – using レンダリングパフォーマンスの向上:JavaScriptエンジンではなくブラウザのHTMLパーサーとSVGレンダリングエンジンによってパースとレンダリングが行われる。これはJavaScriptエンジンによるパースとレンダリングよりも効率的で、レンダリングパフォーマンスが向上する。
環境にもよりますが、、SVG sprites – using を使うのが良さそう
まとめSVG-in-JSは、パフォーマンスとメモリ使用量の観点から見るとアンチパターンである。SVG-in-HTMLは、Javascriptバンドルサイズを小さくするための最善の方法。ただし、最適化すべきもっと重要なことがあるかもしれません。SVG最適化の前に、SVG-in-JSが最大の原因ではないかもしれないことを心に留めておいてください。
ありがとうございました