parceでバンドルしてみた そしてwebpack(1.1)との比較
背景
フロントエンド、ファイルバンドル界に彗星のごとく現れたparcel、とにかく速いを売りにしているこれは本当に速いのかを検証してみようとwebpackでバンドルしていた200ファイル近いソースコードを使い検証してみた
構成モジュール
200ファイルくらい(ほとんどtypescript)
typescriptファイル
javascriptファイル
fontファイル
jsonファイル
cssファイル
stylファイル
環境
node 9.2.0
npm 5.5.1
parcel 1.1.0 (1.1.0でtypescriptサポートだよやったね)
webpackでのバンドルスピード
build -> 60000ms
incremental build -> 10601ms
sourcemap出力はparcelだと今のとこできないため、offに。
sourcemapはそのうち対応しそう
-> https://github.com/parcel-bundler/parcel/issues/68
バンドルしてみた
バンドルするためにしたソースコードの変更
なし
parcelの基本
- parcel [filename]
- 開発時に使う用のコマンド、webpackでいうとdev-serverを起動してビルドする。変更されたファイルがあると再ビルドをしてくれる
- parcel build [filename]
- productionビルド用と称されている実行するとバンドルされたファイルが出力されて終了する
- minifyもデフォルトで兼ねて行う
- parcel v1.1 だとうまいこと動かない
- https://github.com/parcel-bundler/parcel/issues/8
- --no-minify オプションをつけると動く。。
- 紹介したけど比較に出さない
- minifyできないし、、watchとhmrがoffになってるだけということだ。
スピード
- parcel entry.js
- 16.45s
- incremental build 113ms.
- cacheあり 5.28s.
まとめと(個人の)感想
-
速い。
- 開発時ビルドだと初回が 1/3時間でビルドできる
- incrementalだと 10601ms -> 113ms ..圧倒的
- ビルドサーバーを1度落としてもcacheのおかげで バンドルは 5sec
-
ほんとに no configで動く
- webpack.conf職人としてこんなに嬉しい職の失い方は他にない。
- hmrとかwebpackだと設定だけで日が暮れるというのに
production buildのminifyが今壊れてたりでプロダクトに今突っ込むのは悩ましい
-
dev buildに関してはsource mapが提供されておらずでそこだけが厳しめ。
parcelのスピードはマシンのコアの数だけ速くなる(っぽい)ので筆者のマシンだと感動スピードだっただけの可能性はある
速度まとめ
- ソースコードは200ファイル,34000行くらい
| コマンド | 速度(ms) |
|---|---|
| webpack | 60000 |
| webpack -watch (差分ビルド時) | 10601 |
| parcel (初回キャッシュなし) | 16450 |
| parcel (初回キャッシュあり) | 5000 |
| parcel (差分ビルド時) | 113 |
ハマりポイント
-
parcel build はminifyが有効だと動かない
- 実行すると
Cannot read property 'start' of undefined - parcel build --no-minify を使う
-
https://github.com/parcel-bundler/parcel/issues/94
- 実行すると
-
node_modules以下にある.babelrcにも反応する
Unknown plugin "プラグイン名" specified in "ライブラリへのパス/.babelrc"- node_modules以下にあるモジュールが要求してくるbabelのpluginを片っ端から入れる
- ためしてないけど node_modules以下の.babelrc全部消してやってもいけそう？
- もっと賢い避け方あったら教えてください
-
nodejsのバージョン
- `
require is not definedが起きるものがある - 9.2にしよう
https://github.com/parcel-bundler/parcel/issues/40
- `