本日、Parcel v1.9.0がリリースされました
Parcel v1.9.0 is out! 🚀
— Parcel (@parceljs) 2018年6月14日
🌳 Tree Shaking + scope hoisting for both ES6 and CommonJS modules!
👀 Up to 2x faster file watcher
💵 Cache resolved file names
🔎 Extended resolver for SASS, LESS, and Stylus
🚨 Improved browser error reporter
📝 Read more: https://t.co/6IXWVOkMRC pic.twitter.com/LcdVsKt0RK
元記事） 📦 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';
| Version | Size | Time | Time (w/cache) |
|---|---|---|---|
| v1.9.0 | 21.4KB | 6.75s | 1.08s |
| v1.8.1 | 91.94KB | 4.70s | 0.41s |
ファイルサイズが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が参照されることはなくなりました