UIT INSIDE UIT INSIDE
2021/07/02 に公開 1136 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