Breaking Up with SVG-in-JS

HRBrain Fly High #4 -Frontend-にて使用した資料

Transcript

1. Breaking Up with
   SVG-in-JS
   

   View Slide

2. 自己紹介
   大学
   法政大学経済学部　4年
   趣味
   サウナ、キーボード
   

   View Slide

3. はじめに
   kurtextremさんのBreaking Up with SVG-in-JS in 2023
   という記事の内容を参考にさせていただきました
   https://kurtextrem.de/posts/svg-in-js
   

   View Slide

4. Background
   

   View Slide

5. これまでのSVG-in-JSの扱い方
   

   View Slide

6. 
   
   
   
   import React from 'react';
   import Icon from "./Icon.svg";
   const Test = () => {
   return
   }
   

   View Slide

7. import * as React from "react"
   const Svg = (props) => (
   
   
   
   )
   export default Svg
   import React from 'react';
   import Svg from ".svg";
   const Test = () => {
   return
   }
   SVGR
   

   View Slide

8. なぜ SVG-in-JS はアンチパターンなのか
   

   View Slide

9. SVG要素は、Javascriptコードの一部として存在することがある
   バンドルサイズが大きくなるほど、Javascriptが
   パースとコンパイルにかけるコストが大きくなる。
   大量のSVG要素が読み込まれる場合、パフォーマンスに影響
   パース＆コンパイル
   

   View Slide

10. SVG-in-JS SVG-in-HTML
    SVGがReactコンポーネントとして
    存在するため、
    Reactのレンダリングプロセスに
    含まれる
    SVGは直接HTMLに含まれるため、
    Reactのレンダリングプロセスに含まな
    い
    レンダリング
    

    View Slide

11. JS bundle から SVGs を取り除くベストプラクティス
    

    View Slide

12. 
    
    
    
    import React from 'react';
    import Icon from "./Icon.svg";
    const Test = () => {
    return
    }
    Using to load the SVG
    

    View Slide

13. パフォーマンス vs ユーザーエクスペリエンス
    imgタグを使用する方法
    ● ページが最初にダウンロードされたときに、
    アイコンのレンダリングで、ちらつきが生じる
    ● CSSを使ってスタイルを設定できない
    

    View Slide

14. SVG sprites – using
    
    
    heart icon
    
    
    
    
    
    

    View Slide

15. SVG sprites – using
    メモリ使用量の削減：
    SVGスプライトと要素を使用すると、
    一つのSVGイメージを定義し、その定義を再利用して
    同じイメージを複数の場所で表示することができる。
    　　メモリ使用量が削減される。
    

    View Slide

16. SVG sprites – using
    JavaScriptバンドルのサイズ削減：
    SVGスプライトを使用すると、SVGイメージは
    JavaScriptバンドルの一部ではなく、
    独立したSVGファイルとして存在する。
    　　　JavaScriptバンドルのサイズが削減される。
    

    View Slide

17. SVG sprites – using
    レンダリングパフォーマンスの向上：
    JavaScriptエンジンではなく
    ブラウザのHTMLパーサーとSVGレンダリングエンジン
    によってパースとレンダリングが行われる。
    これはJavaScriptエンジンによるパースとレンダリングよりも効率
    的で、レンダリングパフォーマンスが向上する。
    

    View Slide

18. 　環境にもよりますが、、
    SVG sprites – using
    を使うのが良さそう
    

    View Slide

19. まとめ
    SVG-in-JSは、パフォーマンスとメモリ使用量の観点から見るとアンチパターンである。
    SVG-in-HTMLは、Javascriptバンドルサイズを小さくするための最善の方法。
    ただし、
    最適化すべきもっと重要なことがあるかもしれません。SVG最適化の前に、SVG-in-JSが最大の原
    因ではないかもしれないことを心に留めておいてください。
    

    View Slide

20. ありがとうございました
    

    View Slide