元記事） 📦 Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more! 🚀

関連記事）Parcel v1.5.0 〜 v1.8.0で追加された機能

tl;dr

• Tree ShakingとScope Hoistingが追加されてバンドルサイズをかなり小さくできるようになった
• 開発時のビルドタイムが半分になった
• SASS/LESS/Stylusからnode_modules内をImportできるようになった
• ブラウザのエラーレポートが改善された

新機能

v1.9.0で追加された主な機能は次の通りです

• CommonJS/ES6の双方に対応したTree Shakingの追加
• File Watcherの高速化
• Importされたモジュールのキャッシュ
• SASS/LESS/Stylusでnode_modulesを参照可能に
• ブラウザのエラーレポートの改善

それぞれ見ていきましょう

CommonJS/ES6の双方に対応したTree Shakingの追加

ついにTree Shakingが追加されました

特に、他のバンドラーとは違いES6とCommonJSモジュールの双方に対してTree Shakingをサポートしています

また、Tree Shakingはメインプロセスと並行して実行され、結果はキャッシュされるため、Parcelの持ち味である高速ビルドは健在です

加えて、Scope Hoistingを行うオプションが追加されました。これまではモジュールごとにクロージャーでラップし関数名の衝突などを避けていました。Scope Hoistingでは全てのモジュールを一つのクロージャーに含めてしまうため、ファイルサイズの圧縮や実行速度の向上が可能になります

Scope Hoistingはビルド時に --experimental-scope-hoisting オプションを付与することで利用できます

ベンチマーク

Scope Hoistingがどれほどなのか、以下のファイルをビルドした場合のベンチマークをv1.8.1と比較して見ました

// entry.js
import { add } from 'lodash';

ファイルサイズが91.94KB→21.4KBへ約80%も小さくなりました

ビルドタイムもScope Hoistingしないときのタイムが凄まじいですが、十分な早さです

仕組みについてはParcelのMediumエントリーをご覧ください

File Watcherの高速化

v1.9.0ではファイルの監視をバックグラウンドのワーカーに移行させました。そのおかげで、開発時のビルドの時間が半分になりました

画像元

特にWindowsでは70%もビルドが早くなったようです

Importされたモジュールのキャッシュ

モジュール解決し、コンパイルされたものをキャッシュするようになりました

たとえば、import 'React'されたものは最初の１度のみコンパイルされ、コンパイルごとに/my-project/node_modules/react/index.jsが参照されることはなくなりました

参考

• 📦 Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more! 🚀
• webpack 3 リリース内容まとめ - Scope Hoisting