Web Speed Hackathon Online 出題のねらいと解説
- そのほかモジュールのtreeshake化
- webpackのproduction mode (optimization config)
- 画像をwebpにする
- 画像をデバイスで出しわける
- キャッシュ
- 画像のサイズ最適化
- brotli使うとか
- ホストサーバーの場所など
- CDN噛ませる
モジュールのlazyload
[x] NODE_ENVをproductionにする
- [ ] sourcemapをinline出ないものにするか、offにする
- [x] modeをproductionにする
- [x] chunk splittingとlazyload
- [ ] babel-loader
- [ ] url-loader
- [ ] babelのconfig(browserslist, plugin)
- [ ] PostCSSのconfig(cssのminifyやcustom variableの変換, source mapなど)
- [ ]
<script>のdefer(チェックするの忘れてたな〜〜〜) - [ ] 必要最小限のcssの切り出し(これも忘れてたな〜)
- [ ] Resource Prioritization
- [ ] Google fonntsの設定(特定のTextのみロードするなんてことができるんだなあ…)
- [x] Chunk Splitting (ここら辺いつもAngularの恩恵を大きく受けてたことを実感)
- [x] 依存モジュールの最適化(BundlePhobia便利そう)
- [ ] 処理の並列化(awaitが３つ並んで並列になってる)
- [ ] 処理のメモ化(使い回す値を変数にしておくことをメモっていうのか、React特有の単語と思ってた)
- [ ] 処理の遅延実行(VirtualScrollとかIntersectionObserverとか)
- [ ] ロジックの簡略化
- [ ] 画像のlazyload
- [x]画像のフォーマット、サイズや解像度の最適化
- [ ] バックエンドのconfig, 無駄な処理の排除
- [x] Compression
- [ ] 静的ファイルの配信方法
- [x]キャッシュの設定
- [x]サーバーロケーションの設定
- [ ] HTTP/2に変更
- [ ] SSR
やっぱりwebpack周りは直に触ってないから考えの及んでいない部分が多かったな〜 あとは前にパフォーマンス改善した時にやったことでもすっかり忘れてることが結構あった。当時も調べながらやってたし、何ができるか聞かれてパッと全部思い出すほどはまだ身にしみてないのだろうな。
- critical PathのJSは170KBにおさめよう
- The Power Of Not Mutating Data: immutablejsのMapやArrayを置き換えるって置き換えられるような型を作らないといけないのかって身構えてたけど普通にconcatとかを避けてスプレッド演算子使ったりObject.assign使ったりすればいいんだな
npm lsでどこのパッケージで使われている依存なのか確認できる- React自体を置き換える発想はなかったな…Preactってそういうものなのか
- CNAMEを使うと、アドレスはそのままで別のURLの内容を表示することができる。(URLそのままというのがリダイレクトとは違う点)。CDNはこの仕組みを利用している。もう1つ、アクセス元から近いサーバーを選ぶところもCDNの特徴。
- Reactはデフォルトだとあるコンポーネントの一部で再レンダリングが走っただけでその子も含めて全てサイレンダリングが走るのでランタイムのパフォーマンスに影響しうる
- image CDNではurlのパラメータでサイズやフォーマットを指定する
