JavaScript
TypeScript
webpack
parcel

parcelでバンドルしてみた & そのとき出会ったハマりどころまとめ

More than 1 year has passed since last update.

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もデフォルトで兼ねて行う
    • 紹介したけど比較に出さない
      • 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