2021/07/02 に公開1735 views
@potato4d が @kazushikonosu に、LINE バイトに snowpack を導入した経緯と効果について聞いてみました。
ゲスト紹介
@kazushikonosu
- 2021年新卒
- UIT Front-End Dev9 チームフロントエンドエンジニア
- 内定者バイト時代からLINEバイトの開発を担当
snowpack とは？
- ES Module ネイティブなバンドルしないビルドツール
- webpack などと比較し、バンドルせずにブラウザ自体の module 機能を利用する
- 高速なビルド体験
- HTTP/2 を存分に活用できる
LINEバイトにおける課題感
- React + TypeScript で webpack でバンドルしている環境
- SSR&SPA であり、 Next.js は不採用
- webpack のバンドル設定に課題感があり、ビルドが遅くなっていた
- ビルドに 20 秒ほどかかってかなり重い状態
- 差分ビルドがうまくいかない部分もあった
- 開発効率が著しく低下しているため、解決方法を模索していた
- 最終的に snowpack を導入するに至った
- webpack を改善する手段もある一方、snowpack を採用するとさらなる高速化が期待できる
- Vite なども検討したが、 React との親和性がより高いものが当時 snowpack だった
snowpack の適用
- 現在は開発環境のビルドに限定して snowpack を利用している
- Production に対して適用するコードは、引き続き webpack により生成
結果
- 20sのビルド時間が20msに
Refs
- LINE 新卒採用 2022
- キャリア採用はこちらから
- BGM&SE
- 魔王魂/騒音のない世界/OtoLogic