Posted at

babel-preset-es2015をbabel-preset-es2015-node6に変えてビルドを早くする

More than 1 year has passed since last update.

Node.js 4.x系で作ってたWEBアプリケーションがあり、サーバーサイドでもbabelにbabel-preset-es2015を噛ませて通してた。

これを 6系 にアップグレードしようと思ったんだけど、そういえば6系にしたらimport/export以外はほとんどES2015サポートしてるはずと気づいた。

そうなってくるとbabelで無駄なトランスパイルがいっぱい走って時間の無駄なのでどうにかできないかなとおもってぐぐったらピッタリなライブラリがあった。

https://github.com/jhen0409/babel-preset-es2015-node6

普通に考えてこっちのほうが無駄が少ないので変更してみる。


babel-preset-es2015 -> babel-preset-es2015-node6

まずはnodeのアップデート。2016/11/22現在のレコメンドバージョンということでv6.9.1を使うことにした。


console

$ nvm install v6.9.1

$ nvm alias default 6.9.1

次にpresetsをes2015-node6に置き換え。


console

$ npm install --save-dev babel-preset-es2015-node6


es2015-node6を入れて


.babelrc

   "presets": [

- "es2015"
+ "es2015-node6"
]

babelの設定を書き換える。

以上。アプリケーションもうまく動いたので互換性は保てそう。


ビルド時間計測

早くなるのは当たり前で、どれくらいはやくなったか試してみる。


babel-preset-es2015


console

$ npm run build:server

[12:01:16] Starting 'build:server'...
[12:01:19] Finished 'build:server' after 2.9 s


babel-preset-es2015-node6


console

$ npm run build:server

[12:03:36] Starting 'build:server'...
[12:03:38] Finished 'build:server' after 1.94 s

1秒短縮!トランスパイルしたあとのファイルも軽くなってオトク。

「サーバーサイドでわざわざbabel通すな」とか「まだimport使うな」のような天の声が聞こえてきそうですが、もし同じようなことをしている人は試してみるとストレス軽減できるかも。