ep.90 『23 秒のビルド時間が 23 ms に！？LINEバイトにおける snowpack 導入記』 | UIT INSIDE

2021/07/02 に公開1960 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
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:03
こんにちは、UITのホットfdです。

Guest 00:06
ユーザーインターフェースと、テクノロジーを愛する開発者のためのウィークリーポッド、キャストUIT INSIDE。今週も始めたいと思います。

Guest 00:15
今回はですねえ、テーマをスノーパックといたしまして、ゲストにフロントエンドエンジニアのえ、このさんをお呼びして、え、ちょっとプロジェクトにおけるスノーパックの導入について聞いていきたいと思っております。

Guest 00:29
このさん、本日はどうぞよろしくお願いいたします

Guest 00:32
よろしくお願いします。

2. 自己紹介 00:38

Guest 00:38
では、本題に入る前にこうまさんは、えいテンサイドの出演が初めてかなと思いますので、簡単にゲスト紹介の方、えーしていいと思います自己紹介お願いできますでしょうか

Guest 00:51
はいえ、このすと申しますえ、今年のLINEの新卒で、現在はLINEバイトの開発に携わっています、よろしくお願いします

Guest 01:00
はい、よろしくお願いいたします

3. snowpack の概要について 01:04

Guest 01:04
では本題に入っていきたいなと思うんですけれども、今回ですね。LINEバイトの中で、snowpックを導入し出して、まあ、それなりにお時間が経ったっていうところで、ちょっとお話をお伺いできればなと思ってるんですが、

Guest 01:18
まあ、まずそのバックというと

Guest 01:20
まできた時ま、誕生した時に、え、ちょっと話題になって、以降、あんまりどういったものかえ、ちゃんとキャッチアップしてないんだよね。っていう人も聞いている方の中には

Guest 01:29
多くいらっしゃるのかなと思っているので、簡単に概要について紹介してもらってもよろしいでしょうか。

Guest 01:36
はいえ、スノーパックはえ、イエスモジュールベースのビルドツールで、ウェブパックが

Guest 01:41
コードを全部バンドルして、1つのチャンクにするのに対して、スノーパックはえ、ブラウザー側のえ、esモジュールの機能を使って、え、jsを配信しようという仕様の元でできています。

Guest 01:53
なんか、あの、そういった手法に対しての利点みたいなんで

Guest 01:56
あるんですかね。はいえ

Guest 01:58
ウェブパックだと、どうしてもビルドに時間がかかってしまったり、え、そもそもえ。ブラウザーで読み込む時も、1つのチャンクを読み込むので、どうしてファイルサイズが大きくなってしまうんですけども、そのパックだと、1つ1つのファイルをそのまま配信することになるので、ビルド時間の短縮と、

Guest 02:13
あと、ブラザガのesモジュールを使うので、呼び込むときも、ファイルサイズが小さくなるっていうメリットがあげられると思います。

Guest 02:20
ああ、なるほど

Guest 02:23
ま、単純にまトランスパイルまてかえと、バンドルをしなくていいっていう感じの店と、

Guest 02:30
あの、そのパックがファイル単位で分割されていることによってま。並列でアクセスできたりするっていうところとま、専用のコードが不要っていうオーバーヘッドが少ないっていう方な。

Guest 02:46
そのバックはちょっと話が出た時に、私もちょっと知ったぐらいで、全然触ったことがないんで、ちょっとえ。次の

Guest 02:53
こうで詳しく導入のえ、話とかを聞ければなと思っております。

Guest 03:00
えとは、それを踏まえてえなんですけど、今回LINEバイトにおいて、スノーパックを導入して、今運用されてるかなと思うんですけど、

Guest 03:08
そのパックを導入するに至った経緯とか。ま、プロジェクトで、なんでスノーパックが必要だったのか、みたいなところ、ちょっと聞いていきたいかなと思うんですけど、

Guest 03:17
まずえ、なんで、メラインバーにスノーパック導入しようと思ったって感じですかね。

Guest 03:23
はい、1番の目的としては、ウェブパックのビルド時間がえ、とても長くて

Guest 03:29
開発体験が悪くなっていたっていうのがあげられます。既存のバンドルのビルド時間が大体2、3秒後とかかっていたので、すごい開発体験が悪かったっていう状況が

Guest 03:40
ありました。

Guest 03:42
2分2秒ぐらいかかるのは結構重いですよね。そうですね、うん、

Guest 03:47
これはあれですかね。行動を書き換えるために、10秒ぐらい待つっていう風な状態だったって感じですかね。はい、そうですそれはかなり

Guest 03:57
重いですね、なるほど、1回初回フィールドが重いってのは結構よくあるかなと思いますけど、ちょっとコート数行書き換えるぐらいで、

Guest 04:07
20秒かかってたら、ちょっとたまったもんじゃないですよね。なるほど、や

Guest 04:15
やまあ、できるだけ開発をこう高速化したいっていうところから、そのパック導入するっていう方向に至ったっていう感じですかね。

Guest 04:23
はい、

Guest 04:23
もう1点副次的な効果として期待していたのは、既存のコードベースに、コモンジェースのインポートなども含まれていたので、それをなるべくesモジュールに寄せたいっていうのもありました。

Guest 04:35
あの、そのそのパック自体がイエスモジュールベースのえ、ツールで、え、イエモジュール、

Guest 04:42
フレンドリーな書き方を強制されるので、そういうところもいいのかなと思い、

Guest 04:45
選択しました。はい、

Guest 04:47
なるほど、なるほど、私もバックを使っているとなんでしょうが、ベースというか、まあ、基本的に後からワイヤの方に寄せていくような技術には

Guest 04:56
バックなるかなと思うんですけど、まあ、ロールアップとか

4. snowpack を導入するに至った経緯とLINEバイトでの課題感 05:00

Guest 05:00
あれですね。それこそ、スノーバックとかになってくると、結構よりモダンなイエスモ、ジュール、ネイティブな方をこうベースとして

Guest 05:09
運用できるし、それが許容されるっていうのが、まあ、結構メリットになり得るんじゃないかなっていうとこですね。

Guest 05:14
はい、そうです。

Guest 05:15
なるほど、確かにそうですね、どうしても、あのモンジェースの書き方とかって意識しない

Guest 05:22
したり、強制されないと残ってしまうものでもあるかなとは思うんで、なんか確かに副次的作用といえど、かなりいいところがあるなと

Guest 05:30
ありました。

Guest 05:32
なるほど、ああ、確かにそういうメリットもあるんですね。

Guest 05:37
はい、そのスノーパックを導入する過程で、やっぱり既存のコードベースを見直してこう。どこか。将来的に

Guest 05:44
esモジュールで直進配信するとなった時に衝撃になるかみたいなところも洗い出したので、それはすごいよかったなとあ、

Guest 05:51
はい、いいですね、

Guest 05:56
ありがとうございます。

5. snowpack という選択肢をとった理由 05:59

Guest 05:59
はえ、その上でスノーバック。ちょっと私がワンドラについて、正直ウェブパックぐらいしかあんまり普段使うことがなくて、他の選択肢ってのはあんまり。詳しくないんで。

Guest 06:09
ですけど、なんか、スノーパックの他にあげられる。なんか、こういったバンドルツールま、バンドルツールではないのかもしれないです。けれども、なんかこういうものの選択肢って他に考えたものとかってあったりしましたかね。

Guest 06:20
はい

Guest 06:21
似たようなツールとしては、え、ビートっていう

Guest 06:24
ビーの開発者が作っているツールがあるんですけど、もはいえ、リアクトとの相性であったり、あとは、バベルを使えるっていう点からのスノーパックの方が、今回にはふさわしいかなと思い、選択しました。

Guest 06:36
ああ、確かにビートも結構最近は使われつつあるツールである気はします。けれども、どうしてもなんかbjsか、あと、普通のいわゆる

Guest 06:46
ノートジェース用のコードというか、パッケージというかの開発に使われてるのが中心な気はしますよね。

Guest 06:53
そうですね、で、リアクトのホットモジュールリロードとかに対応するためにも、スノーバックの方が今回は妥当なのかなっていう結論になりました。

Guest 07:04
リアクトとえ、まあ、ちょうどLINEバイトがリアクトで作られてるっていうのもあって、ま。そこの新和制をかなり重視してやったっていうところが

Guest 07:11
ある感じですね。はい、なるほど、なるほど、ありがとうございます。

Guest 07:19
スノーバック自体は、結構リアクトとは、相性ばっちりって感じなんですかね。

Guest 07:25
そうですね、まただこう最初からスノーパックのプロジェクトを初期化するよりは、こう既存の設定もあるので、こう色々と設定を

Guest 07:36
触る必要があったんですけども、おおむね。リアクトにはえ、対応できる形になってたと思います。

Guest 07:43
ま、多少アップデートすべきところあれど、まあ、全体としては、そんなにコストかからずにスパック導入ってのができた。はいっていうか、そうですね、

Guest 07:54
ちなみに、今回適用した範囲っていうのは、まあ、多分課題が開発環境のえコスっていうところだったかなと思うんで、デベロップ向けのビルドかなと思うんですけど、それはデベロップ向けビルトとして、そのパックを

Guest 08:07
適応し、使い出したっていう感じですかね。

Guest 08:10
はい、そうですね、まだスノーパック自体あのすごい新しくて、こうプロダクション環境で使われてる例も少ないと思うので、

Guest 08:19
こう、プロダクション向けのビルドのツールチェーンとして使うのには、まだ早いのかっていう判断で、とりあえずは開発環境から始めようっていうところで

Guest 08:29
導入した次第です。

Guest 08:31
あ、なるほど、なるほど、ありがとうございます。じゃあ、今はま開発環境は改善しつつ、まあ、自分たちが開発する時は

Guest 08:38
高速かつasモシルネイティブみたいなのを強要されるような状況で開発をするけど、まあのデリバリーする時にはま、ある程度信頼性と実績のあるウェイパックっていう形で使き、あ、使い分けてる

Guest 08:50
ような状態なんですね。

Guest 08:52
はい、

Guest 08:53
いいいいですね、なんか、どうしてもスノーパックとか、こういうもの入れるってなるとこう。

Guest 08:59
これって、プロダクションレディーなんだっけ。みたいな話で、結構出てきちゃいがちな印象があるんですけど、そこをこううまく切り分けて、

Guest 09:07
あの、別々のツールを使うっていう選択を取る、取れるっていうのは結構いい気がしますよね。

Guest 09:14
はい、そうです、

Guest 09:17
なかなかそういう意思決定やってるのは多くない気がするんで。ああ、確かに

Guest 09:21
なんかそういう考え方を取り入れると、すごい簡単にこういった新しいツールを試すっていうのもできるようなっていうのがあって、ちょっと個人的にはなかったそうなんで、

Guest 09:32
いいなと

Guest 09:33
思いました、

Guest 09:34
ありがとうございます

Guest 09:36
あ、ありがとうございます。今、ちょっとLINEバイトのsnowバックをえ、追加したプルリクエストを覗いてみたりしてるんですけど、なんか、ここにあの

Guest 09:44
アップトセタイムファスタービーとかって書いてあって、すごすごいなと改めて思いますね。

Guest 09:53
やっぱり早いっていうのは、開発においては、まあ、開発効率に直する部分だから、まずは入れたい開発環境に入れたいとこではありますもんね。

Guest 10:03
そうですね、やっぱりそれで作業か効率が変わるのであれば、積極的に取り組みたいところではあるのかなと思っています。

Guest 10:10
ちなみに、さっき、ウェイパックを導入した時には、あの

Guest 10:14
20秒ぐらいかかってたって話があるかなと思うんですけど、スノーバックの方法導入してみてからは、どれぐらいに変わりましたかね。

Guest 10:22
はい、スノーパック自体、最初にあののモジュールズのそれぞれのライブラリをえ、イエスモジュール形式に変換するっていう作業があるので、初期

Guest 10:32
初期の部分では多少時間がかかるんですけども、それ以降はえ、例えば1つのファイル変更したら、こう全てのバンドルを作り直すのではなくて、

Guest 10:42
そのファイルだけをトランスファイルすることになるので、え、変更ごとのビルド時間はま、先ほど2、3秒ぐらいっていう話があったと思うんですけど、そっから2、3ミリセック

Guest 10:53
ぐらいまで短縮することができ。

Guest 10:55
ああ、じゃあ、もうほぼラグがないぐらいの速さにはい感じですね。書いた瞬間に反映されるというか、

Guest 11:02
もう良さそうですね。

Guest 11:04
すごいっすねおあ、じゃあ初めはちょっとかかるってのは、まあ、ウェブバックとまあ同じというか

Guest 11:11
なんですけど、ま、差分更新っていうのに、やっぱりファイルごとに分割されてる利点がめっちゃ現れてるっていう感じそうですですね、なるほど、

Guest 11:19
すごいですね、ほんとに2、3秒が23ミリセックになるのはすごいっすね。

Guest 11:29
いや、ちょっと

Guest 11:30
結構うちの会社ラインだとウェブパックを使ってて、まあ、あの、そのクレイトリアクトアップとか、ネクストとか、そういったツールをかまさずに、ウェブパックを普通に使っていて、特有の機能をなんかこう。色々も盛りで使ってるわけでもない

Guest 11:43
けど、ウェバックを使ってるっていうプロジェクトも多いかなとは思うんで、なんか、他のプロジェクトでも、ちょっとスノーパックどうっていうのを話してみても、面白いかもしれないですね、

Guest 11:53
確かにそうです

Guest 11:56
いや、なかなかすごい結果ですね、この差はありがとうございます

6. 導入した結果と現在 12:06

Guest 12:06
では、ですねえ、その上で

Guest 12:09
スノーバックの導入がま、結構前半年ぐらい前かなと思うんですけど、半年ほど経って、今、えー。スノーバックでを使って開発していて、なんか感じることとか実感して得られる恩恵とかって、やっぱり結構

Guest 12:22
きいですかね。

Guest 12:25
はい、そうですね、やっぱり何よりも開発体験が良くなったっていうのがあげられると思っていて、ウェブバックの時は、

Guest 12:32
こう1つの変更を行うごとに待っていたのが、まそのバックを導入することによって、すぐに変更を確認することができるようになったので、その意味で

Guest 12:43
あのすごい開発体験が向上したかなっていう風に考えています。

Guest 12:46
はい、単純にこれまではちょっとここで書く書いたら、ちょっと待って書いてあってか書いてあって、みたいな感じになってたのが、かなり変わったっていうとこ

Guest 12:55
ですね。そうですうん、うん、確かになんか結構

Guest 12:59
なんでしょう。ビルド時間が重くなってくると、できるだけいっぱいコード書いてから保存したみたいになりがちなとこあるかなと思うんですけど、なんか

Guest 13:08
短くなるとこうシュッと保存して、とりあえず確認しとかもできるからいいですよね。

Guest 13:14
そうですね、ま、あとあとやっぱりこう2、3秒かかるのはおかしいっていう意識があったので、その部分を意識しなくてもよくなったな。

Guest 13:22
確かにやってて、これおかしいよなと思いながら、開発するのはちょっと辛いものがありますもんね。

Guest 13:30
そうですね、

Guest 13:32
実際今もう開発は。じゃあスノーパックベースで、というか、スノーバックを基本的に使って開発してるっていう風な状態なんですかね。

Guest 13:40
はい、そうですね、ローカルで開発する時は、snバックで開発してま最後にはまブバックでビルドするので、そこでこう

Guest 13:47
万が一問題があったとしても、一応確認できるような状態になっています。

Guest 13:54
ちなみに、ちょっと導入して運用してみてって話で1個聞きたいんですけど、それで言うと、実際やってて、スノーバックとウェイバックで、なんかビルド結果が違って困ったこととかってあるんですかね。

Guest 14:06
今のところないですね、ただ、やっぱり新しいライブラリとかを導入するときに、スノーパックでもビルドすることが、あの求められるので。

Guest 14:15
はい、

Guest 14:15
そこでこうよりesモジュール、フレンドリーな書き方を強制されてるっていうのは、何回かありました。

Guest 14:21
ああ、なるほど、なるほど、なんかこのライブラリいいじゃんって思っても、実はコモンジェースのなんか、ライブラリーレみたいなのは、一応あるっていう感じ。

Guest 14:29
そうですね。エクスポートの方法とかが、イマイチで、こう少し対応が必要っていうのはありました。はいはいはいはい

Guest 14:36
まそんなところで、あの導入する時はちょっとあのスノーパックに対応してるから、見ないといけないが、今のところプロダクションとか。まあ、何か運用にあたって、なんか問題が起きたってことは全然ないって感じはですね。そうですね、

Guest 14:49
なるほど、

Guest 14:50
あ、ちょっとウェイバックのビルド時間に困ってるプロジェクトにこそ、ちょっとこういった情報は伝えていきたいですね。車内にも社内にもですけど、

Guest 14:59
そうですね、やっぱり開発体験があの、ほんとに変わるので、そうでも積極的に導入したいところですね。

Guest 15:07
いや、なかなかやっぱりプロダクションで使えるのかっていうのが、みんな気にしちゃうところかなと思うんですけど、それがこういう形で開発環境だけで使うっていう視点が新たに生まれたっていうのもかなりとかな

Guest 15:21
あ、ありがとうございますはい、

Guest 15:24
ではですね、最後にあ、最近やってる他にこういった開発環境の改善がもやってるよみたいなのがあったら、ちょっと聞きたいなと思ってるんですけど、なんか最近やった。こういった

7. 最近やっている開発環境の改善 15:25

Guest 15:35
開発環境の改善とかってあったりしますかね。

Guest 15:39
はい、あのスパックの導入は開発環境の改善なので、ちょっと違うかもしれないんですけど、

Guest 15:44
はい、

Guest 15:45
あの、コードスプリッティングであったりとか。はいこう。コードベースを改善するってことは、あの積極的に取り組んでいます。

Guest 15:54
なるほど、なるほど、コードスプリッキングは結構あれですかね。これまでは、普通にあのチャンク分けされていなかったとこに、今していってるっていう感じですかね。

Guest 16:04
はい、ウェブパックでマントルしていたものを、あのページごとに分けようっていうことは、現在進行形で取り組んでいます。

Guest 16:12
結構なかなかあれですよね、なんか、こう歴史があるコードベースになってきたりとか、結構前に構築されたやつとかになってると、オードスプリッティングとかって、ちゃんとされてなくて。とはいえ、

Guest 16:22
craとかネクストとかに乗ってもないんで、自動でされてるわけでもないみたいなのって結構ありますもんね。

Guest 16:29
そうですね、あの、サーバーサイドレンタリーとかの自前で書いてたりするので、

Guest 16:34
色々とあの詰まるところがあります。

Guest 16:37
そうか、サーバーサイドレンダリングもやってると結構大変ですよね。

Guest 16:42
そうです、

Guest 16:43
自前で書いてるサーバーサイドレンダリングしてるプロジェクトもそんな多くない気がしますし、なんかそういう意味でも、ちょっと。もしかしたら、社内で言うと、バイトは特徴的な

Guest 16:52
プロジェクトかもしれないですよね。

Guest 16:56
ネクスト使ったり、ナクスト使ったりって事例はちょこちょこ聞きますけど、自分たちで頑張ってさ。サイトのコード書いてますっていうのは、多くない気がしますよね。

Guest 17:05
いや、コードスプリッティングとか、そういう改善も結構少しずつやっていけるといいですね。

Guest 17:10
はい、

Guest 17:11
ちなみに、こういった改善とかって、結構開発の手が空いてるタイミングでやっていたり、って感じなんですかね。

Guest 17:18
そうですね、あの、開発の個数がよに余裕があるとま、積極的に改善の話が上がるみたいな環境はできてるのかなと思います。はい、

Guest 17:28
あ、その環境ができてるのはすごいいいですね。なかなかちょっと空いたら仕事空いたら仕事みたいな状態だと、こういうのってなかなかできない

Guest 17:36
感じになるかなと思うんで、ちょっと改善とかに時間かけられるっていうのが、チームの前提としてあるってのは、かなりいい状態な気がしますね。

Guest 17:47
ありがとうございますちょっとももしえぜひ、また、なんかこういった開発ツール導入したよみたいなのがあったら、ええ。インサイトでも

Guest 17:54
聞きたいなと思っているので、なんかまたぜひぜひお話をお聞かせいただければと思います。はい、

Guest 18:00
お願いしますはい

Guest 18:07
というわけでえ、今回はえ、このさんにえ。スローバックをえ、LINEバイトにえ導入して運用していたえことについての経緯やえ、実際導入してみても、書館や今行ってる改善などなどについて聞いていきました。

Guest 18:23
ラインのフロントエンド組織UITではま、このようなフロントエンドに関するえ、議論やえ、意見交換などを日々行っております。

Guest 18:31
UIT INSIDEで公開されているコンテンツのえ、中にはえ、こういった社内で話しているものから、生まれたエピソードというものも多くございますので。

Guest 18:41
今後ぜひぜひ発信していければと思っております。

Guest 18:46
また、エピソードについての感想などなどがありました。らえ、ハッシュタグえ、シャープUIT、アンダースコアインサイドにえーついていただきますとえ、運営メンバーの方で拾っていきますので、ぜひぜひご意見やご感想などなど、つぶやいていただければと

Guest 19:00
思います。

Guest 19:02
そして、え、最後にですが、え、今ですねLINEではえ、新卒中とともに、新たなメンバーをどんどん募集しているような状態となっております。

Guest 19:11
小のと最下部の方にですね、求人へのリンクの方を貼っておりますので、カジュアル面なからでも、ぜひぜひえご連絡いただければと思っております。

Guest 19:21
というわけで、今回はえ、LINEバイトにおけるスノーバックの導入というところで、このさんに話を聞いていきました。このさんお話ありがとうございました、

Guest 19:30
ありがとうございました。