依存パッケージの最適化

[shun91]

2 から分離

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#%E4%BE%9D%E5%AD%98%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96

TODO https://github.com/shun91/web-speed-hackathon-2021/issues/10#issuecomment-994047596

[shun91]

[shun91]

jQuery、pako

18 で削除

[shun91]

core-js

最新版Chromeで動作すればいいので不要なはず。

おもむろに削除したところ、setImmediateが動かなくなった。 Node環境でしか使えないAPIだったらしい。知らなかった。。

Window.setImmediate() - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate

なのでこれはsetTimeout(fn, 0)に修正する。

[shun91]

regenerator-runtime

async/awaitのpolyfillに必要なはずだけど最新版Chromeで動作すればいいので不要。消す。

[shun91]

moment

dayjsに置き換える。

利用されてるのは4箇所で、いずれも以下のようなコード。

<time dateTime={moment(user.createdAt).toISOString()}>
  {moment(user.createdAt).locale('ja').format('LL')}
</time>

moment(user.createdAt).toISOString()はdayjs(user.createdAt).toISOString()で代替できそう。

JavaScript dayjsはMoment.jsの代替になるか? | nansystem https://nansystem.com/dayjs-alternative-to-momentjs/

moment(user.createdAt).locale('ja').format('LL')は2021年12月14日のような表記へのフォーマットなので、これも代替可能。 dayjs(user.createdAt).format('YYYY年M月D日')でよさそう。

全61件！Moment.js日付フォーマット実例 – console dot log https://blog.capilano-fw.com/?p=908

[shun91]

現時点で重そうなのは以下。

• standardized-audio-context
  • https://github.com/shun91/web-speed-hackathon-2021/issues/10#issuecomment-994067455
• lodash
  • https://github.com/shun91/web-speed-hackathon-2021/issues/10#issuecomment-994086152
• bluebard
  • https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#bluebird--race-timeout
• react-dom
  • https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#react--react-dom
  • Reactとの違い | Preact： Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
  • (Reactから)Preactへの移行 | Preact： Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
• react-helmet
  • https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#react-helmet

[shun91]

standardized-audio-context

AudioContextのpolyfillっぽい https://github.com/chrisguttandin/standardized-audio-context

chrome最新版で動けばいので消す

[shun91]

lodash

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#lodash

利用しているのは以下ファイルのみ。 https://github.com/shun91/web-speed-hackathon-2021/blob/main/client/src/components/foundation/SoundWaveSVG/SoundWaveSVG.jsx#L1

具体的には以下のメソッドを利用している。

• map
  • Array標準のmapメソッド
• zip
  • https://youmightnotneed.com/lodash/#zip
  • Float32ArrayだとNaNになってしまう。原因不明。一旦lodash.zipを単体でインストールすることで回避する
• mean
  • https://youmightnotneed.com/lodash/#mean
  • 標準に平均値を出すメソッドはない
• chunk
  • https://youmightnotneed.com/lodash/#chunk
• max
  • Math.max

[shun91]

bluebard

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#bluebird--race-timeout

npm lsしてみる

$ npm ls bluebird --depth=10
web-speed-hackathon-2021@ /Users/shun/git/shun91/web-speed-hackathon-2021
└─┬ @web-speed-hackathon-2021/client@0.0.1 -> ./client
  └─┬ gifler@0.3.0 invalid: "github:themadcreator/gifler#v0.3.0" from client
    └── bluebird@3.0.2

gifler https://github.com/themadcreator/gifler

giflerを利用しているのは以下 https://github.com/shun91/web-speed-hackathon-2021/blob/main/client/src/components/foundation/PausableMovie/PausableMovie.jsx#L2

要件を満たす形で代替できる手段を探す

• 動画が自動で再生される
• 動画をクリックすると、一時停止・再生を切り替えられる

これ使えそうな気もするけど、一時停止ではなく動画の最初に戻っちゃうので、それが要件を満たすのかどうか...

この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js | コリス https://coliss.com/articles/build-websites/operation/javascript/pauses-animated-gif-library-freezeframe.html

[shun91]

現状

[shun91]

残っているパッケージについてはissue分割したのでこちらはクローズ