ボクココ

個人開発に関するテックブログ

JavaScript 圧縮ライブラリ for Rails

ども、@kimihom です。

f:id:cevid_cpp:20200719224829j:plain

今更かもしれないけど、AssetPipeline での圧縮ライブラリについて進展があったので記す。

Rails フロントエンドのライブラリ

長らく、Rails での AssetPipeline で、 JavaScript の圧縮といえば Uglifier であった。しかし、この Uglifier、今は開発が停止されている。しかも ES5 のままで止められており、ES6 の記述が当たり前である今、どうするのか意見が分かれている。(もう4,5年くらい前からの話)

多くの方が AssetPipeline から外れて、Webpacker へ移設している。現状、この Webpacker が Rails 6 が現在デフォルトで提供しているツールとなる。ただこれ、現状だと JavaScript のみで、CSS は AssetPipeline 経由で圧縮する状態である。実際 Webpacker を使ってみるとディレクトリ構造や取り入れるライブラリなど、色々カオスになってしまって管理しづらいと嘆いていた。

www.bokukoko.info

この中途半端っさぷり? に呆れて、Rails の Asset 管理から完全に外れる (Rails から離れる) 選択をされる方が多くいる。この気持ちになるのも当然だろう。

Rails のままいきたいと考える上で、現状の最適は何なんだろうか。

救世主 terser

terser を見つけるまで、時間がかかった。2021年1月に README の変更が加わっていたのである。

UglifyJS only works with ES5. If you need to compress ES6, ruby-terser is a better option.

terser というものが、Uglify の後継として登場したようである。

GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+

この terser の Ruby gem が terser-ruby となる。

GitHub - ahorek/terser-ruby

これによって、今までの AssetPipeline と全く同じ運用で、 ES6 の JavaScript が書けるようになった。個人的には、Webpacker で中途半端に JavaScript だけ圧縮させる運用をするより、圧倒的にシンプルで問題の起きない構成だと考えている。

今後の対応予定

だいぶ長いこと待っているんだけど、Webpacker で CSS も画像の全部圧縮してくれたら、Webpack への移行タイミングが来たと判断できる。だが、これがいつまで経っても実現されない。何かハードルがあるのか、そもそもそういう方針ではないのか不明である。

Rails が バックエンドとフロントエンドを完全に切り分ける判断はしない(と願う)。 Rails は JavaScript も密接にサーバーと連結させることで、少人数での開発効率を一気に上げてくれる考えだからだ。rails_ujs の協力 もあって、その恩恵を受けている。

フロントエンドの様子を見ながら、Webpack(er) への移行を進めていこうと思う。現状は今ではないという判断のままである。