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サポートだよやったね)

build -> 60000ms
incremental build -> 10601ms

sourcemap出力はparcelだと今のとこできないため、offに。
sourcemapはそのうち対応しそう

なし

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になってるだけということだ。

速い。
- 開発時ビルドだと初回が 1/3時間でビルドできる
- incrementalだと 10601ms -> 113ms ..圧倒的
- ビルドサーバーを1度落としてもcacheのおかげでバンドルは 5sec
ほんとに no configで動く
- webpack.conf職人としてこんなに嬉しい職の失い方は他にない。
- hmrとかwebpackだと設定だけで日が暮れるというのに
production buildのminifyが今壊れてたりでプロダクトに今突っ込むのは悩ましい
dev buildに関してはsource mapが提供されておらずでそこだけが厳しめ。
- しかし希望はある　https://github.com/parcel-bundler/parcel/issues/68`
parcelのスピードはマシンのコアの数だけ速くなる(っぽい)ので筆者のマシンだと感動スピードだっただけの可能性はある

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