kyoncyの日記

Zero config で始めるのか Webpack をゴリゴリ書くのかのポエム

November 14, 2020

※ ポエムです

create-next-app(CRA), create-react-app(CNA) 使ったり、Rails で webpacker 外して webpack の設定書いたりしてきました。

どっちが良いとかじゃなくて、どっちにも良さがあります。

Create React App

最近、プロダクトで採用している CRA を v1 から v3 にアプデしました。react-app-rewired を使って config override していたので eject は上手くいきませんでした。

CRA で始めると、package.json に react-scripts が入るのですが、react-scripts の dependencies に webpack, eslint, babel などが含まれていて、ビルドファイルを書かなくてもよしなに対応してくれる仕組みになっています。

v1 から v3 へのアプデの際に、エラーで躓くことも多かったので customize-cra というライブラリを入れたりしました。config ファイルの多少の修正はあったものの、エラーを解決する程度でした。

結果としてはビルドの速度が大幅に改善しました。プロダクションビルドが 80s かかっていたのに 20s ほどになりました。アプデと同時にサイズの大きいライブラリをリプレースしたりしたとはいえ、4 倍ほどの速度改善になりました。

大きなところでは customize-cra で webpack の splitChunks をよしなにやってくれるようになったことだと思います。node_modules の読み込み周りがスッキリしました。

開発者の負担を減らして見えないところで頑張ってくれるのは、とてもありがたいです。

Webpacker 外して Webpack

対して webpack でゴリゴリ config ファイルを書いていくほうです。

必要な loader を読み込んだり plugin を入れたりすべてやらなければなりません。おかげで Webpacker がどれだけよしなに Rails との繋ぎこみをしていたのかを知ることが出来ました。

splitChunks を自分で設定したりしてバンドルサイズやビルド速度を少しでも改善しようとするとよしなにやってくれることは少なくなります。

ここで「少なくなります」と書いたのは webpack 本体の実装のことを無視して「よしなにやってくれることはゼロです」というと一部の方から反感を買うと思ったからです。

確かに管理は大変ですし、学習コストも高く付きます。ですが、学習しておくことで得られる恩恵(ビルドフローを知るきっかけになる、どう動作しているのかがブラックボックスになりにくい)もあると思います。

どっちが良いの?

結論としてはアプリケーションを作る目的も様々なので、どっちでも良いと思ってます。

ただ、僕自身は webpack config くらいは設定できるようになっておくと技術選定の際の視野は広がるのかなぁとも思ったりします。

zero config でやるにしても本格的なプロダクトを作成するとなると、どこかで設定をイジる必要が出てくる気がしてます。

そんなときに最小限の変更で済むのは手間が少なくて良いことですが、ブラックボックスになってるとリファクタやビルド改善しにくかったり、ライブラリのアップデートの対応に時間がかかる気がします。

そんなことを考えたりしてたので、最近は少しずつ webpack, babel, prettier, eslint, typescript のコードを読んでみてます。全然理解できてないですが細かく見ていってる感じです。分かってきたらなにか記事書きたいです。React も読んでいきたいな。


きょんしー

社会人2年目の きょんしー🐧です。みんなのコード で働いてます。Twitter, Facebookやってます。React, TypeScript 書いてます。土日は開発したり読書したり都内を散歩してます。ボドゲがしたい。 経歴は Wantedly に記載してます。 ぼちぼち転職活動かなぁとか考えたりしてます。