開発環境でWebpackerのbuildが遅くてちょっと開発効率が落ちるみたいなことって、あると思うのですが、その際にSourceMapの生成をやめると割と早くなりそうだったので、そのへんをメモしておきます📝

WebpackerでSourceMapの生成をやめる

Webpackerで開発環境でのSourMap生成をやめるにはconfig/webpack/development.jsに以下の記述を追加するだけです。 ※productionでやめる場合はconfig/webpack/production.jsを変更してください。

// sourcemapを無効化
environment.config.delete("devtool");

WebpackでSourceMapの生成をやめるにはdevtoolを未設定にすれば良いので、上記コードでdevtoolのプロパティを削除しています。

Webpackerの開発環境のデフォルト設定はcheap-module-source-mapになっていて、これは公式ドキュメントのbuildの項目がslowになっているので、そこそこコストが高いもののようです。※当たり前ですが、(none)はfastestです。

ちなみに少し本線とずれますが、WebpackerのSourceMapへの考え方はこのあたりのissueにDHHのコメントが乗っているので、参考になると思います🚃

どれくらいビルド時間が短縮出来るか

まず今回試した環境は90ファイル(計: 200.0KB程度)をWebpackでビルドしているような環境で計測しています。

$ ls app/javascript -1R | wc -l
90
$ du -h app/ | grep javascript
200.0K     app/javascript

計測に使用したcommandは以下です。以下を実行して最速/最遅を除いた3回をSourceMapのあり(before)/なし(after)でビルドにかかった時間(real)を比較しました。

for run in {1..5}; do time bin/webpack; done;

結果は以下の通りで、これぐらいの規模感でも2.5秒ぐらいは早くなりそうですね👀

#	before	after	diff
1	0m17.504s	0m15.607s	1.897s
2	0m19.847s	0m17.129s	2.718s
3	0m20.963s	0m17.150s	3.813s

一応最速/最遅を比較したものも載せておきます🐰🐢

#	before	after	diff
MIN	0m16.128s	0m14.866s	1.262s
MAX	0m21.899s	0m21.546s	0.353s

buidのスクリプトに1行追加するだけの割には割と効果がありそうなので、Webpackerを使っていて、かつビルド時間に不満がある方は試してみても良いかもですね。