Practice on 2023-03-01

何をしたか

Lodash をなくす

• Lodash: 便利機能の詰め合わせ
• その分サイズが重い
• d608fa6
• analyze-01.html

Axios をなくす

• Promise based HTTP client for the browser and node.js
• fetch で書き換えできるけど、いろいろ注意
• https://zenn.dev/syu/articles/9840082d1a6633
  • POST 通信のやりかた
  • JSON取得
  • エラーハンドリング
• da5521d
• analyze-02.html

Practice on 2023-02-28

何をしたか

Update webpack.config.js

40e2833

Before:

After:

ほかのroutesも動的読み込み

3ebc763

いらないライブラリを消す

• 「axios, moment, lodash はクソデカウザすぎライブラリとして有名」(原文ママ)

side-effects.js

• まあとりあえず side-effects.js を消したい

import "core-js";
import "regenerator-runtime/runtime";
import "es5-shim";
import "es6-shim";
import "es7-shim";
import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";

• 上の5つはPolyfillなのでいらない
• fortawesome は fontawesome のアーカイブみたいな感じ？
• <i class="fa-***"> を見つける → 3つしかない
• 3つしかないので、SVG取ってきてそのまま貼り付け
• 3de536d, ee0d8ea
• analyze-02.html

moment → dayjs

• https://day.js.org/
• Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.
• moment の文字列を dayjs に変えるだけでいけるっぽい、べんり。
• 5a58c84
• analyze-03.html

画像の圧縮

  WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
 Assets: 
    592.bundle.js (2.93 MiB)
    assets/images/hero.jpg (2.49 MiB)
    assets/images/players/001.jpg (586 KiB)
    assets/images/players/002.jpg (1.72 MiB)
    assets/images/players/003.jpg (4.47 MiB)
    assets/images/players/004.jpg (1.35 MiB)
    assets/images/players/005.jpg (1.16 MiB)
    assets/images/players/006.jpg (2.7 MiB)
    assets/images/players/007.jpg (2.24 MiB)
    assets/images/players/008.jpg (1.67 MiB)
    assets/images/players/009.jpg (2.82 MiB)
    assets/images/players/010.jpg (703 KiB)
    assets/images/players/011.jpg (3.9 MiB)
    assets/images/players/012.jpg (822 KiB)
    assets/images/players/013.jpg (1.92 MiB)
    assets/images/players/014.jpg (1.18 MiB)
    assets/images/players/015.jpg (1.73 MiB)
    assets/images/players/016.jpg (1.18 MiB)
    assets/images/players/017.jpg (1.67 MiB)
    assets/images/players/018.jpg (1.31 MiB)
    assets/images/players/019.jpg (1.07 MiB)
    assets/images/players/020.jpg (2.11 MiB)
    assets/images/races/001.jpg (6.32 MiB)
    assets/images/races/002.jpg (2.29 MiB)
    assets/images/races/003.jpg (704 KiB)
    assets/images/races/004.jpg (1.7 MiB)
    assets/images/races/005.jpg (1.2 MiB)
    assets/images/races/006.jpg (1.3 MiB)
    assets/images/races/007.jpg (3.11 MiB)
    assets/images/races/008.jpg (2.2 MiB)
    assets/images/races/009.jpg (2.73 MiB)
    assets/images/races/010.jpg (2.6 MiB)
    assets/images/races/011.jpg (3.12 MiB)
    assets/images/races/012.jpg (2.96 MiB)
    assets/images/races/013.jpg (2.3 MiB)
    assets/images/races/014.jpg (1.34 MiB)
    assets/images/races/015.jpg (440 KiB)
    assets/images/races/016.jpg (2.7 MiB)
    assets/images/races/017.jpg (1.52 MiB)
    assets/images/races/018.jpg (2.39 MiB)
    assets/images/races/019.jpg (4.99 MiB)
    assets/images/races/020.jpg (996 KiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Bold.ttf (1.93 MiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Medium.ttf (1.93 MiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Regular.ttf (1.94 MiB)

• 画像のリサイズ or webp に変換する
• それぞれの画像がどのくらいのサイズ感で使われてるかを実際に確かめる
• 例えば hero.jpg 、表示されてるのは 1024x735くらいなのに、4K くらいの解像度がある
• とりあえずリサイズしてみた (PowerToys最強👊😁)
• 55c885b

  WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
  Assets: 
    592.bundle.js (2.93 MiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Bold.ttf (1.93 MiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Medium.ttf (1.93 MiB)
    assets/fonts/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Regular.ttf (1.94 MiB)

• 画像関係の Assets Warning は消えた

canvas の利用をやめる

• canvas は描画処理もあるので (たぶん) 比較的遅い
• 画像も使うともっと重め？
• TrimmedImage.jsx で使われているので消す
• ef46ba4

CI の調整

• GitHub Actions、全ページに対して一回一回ビルドするのは非効率だと思ったので、最初に一括でビルドしちゃうようにする
• 3cd60bf, a099c85

WebP に置き換え

• やっぱり WebP はいいぞ
• npx @squoosh/cli --webp "{}" <files...>
• 8a961b2

/api/hero の削除

• API仕様書に書かれてないけど /api/hero にアクセスしてた
• 見た感じ、 /assets/images/hero.jpg を返すだけっぽい
• 使われてるのも1か所しかないし、そのまま埋めちゃう
• b4ef137

Practice on 2023-02-22

何をしたか

環境構築

• d1be520

Lighthouseを自動で走らせるCI作り

• b85f940 (PRに対応する Initialize)
• bc5eac8 (Commit にコメントをするようにした)
• 3138834, e2db2b4 (Actionsの並列化、スコア表示の変更)
• 693b838, 95665cd, 7bc1948, 4c8efce, 0c670e5 (いろいろ修正)

bundle-analyzer を入れる

• https://www.npmjs.com/package/webpack-bundle-analyzer
• f7b45a0
• 
  (analyze-01.html)
• index.jsx でかすぎ～～

production build

• デフォルトで なぜか Production Build になってないので、有効化。
• 全部 Production Build になるとデバッグの都合が悪いので、 Development Build もできるようにしておく。
• 3470890
• analyze-02.html

production で devtools を無効化

• https://webpack.js.org/configuration/devtool/
• 4302091
• analyze-03.html

Code Splitting

• https://webpack.js.org/guides/code-splitting/
• f6cdce0
• analyze-04.html
• 

ChargeDialog の遅延読み込み

• zengin-data 、何者？
• https://zengin-code.github.io/
• 使われるのは限定的なので、遅延読み込みしていい
• fe745b3
• analyze-05.html