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