jspmについて

みなさんjspmってご存知ですか。 自分はQiitaの記事で知ったんですけど。

jspm で快適 javascript 生活（クライアントサイド JS の依存管理決定版） - Qiita

ES6 module loaderを利用してES6のimport文で前もってダウンロードしていたパッケージを読み込む仕組みになってるみたいです。依存も解決してくれるし特にnpmでもgithubでもbowerでもインストールできるのが明らかな優位な点っぽいです。

importって速度的に大丈夫なの？

jspm initってやるとconfig.jsとes6-module-loader.jsとかが入ったjspm_packagesのフォルダが生成されるんですが、そんないろんなファイルをインポートして遅くならないかなって 思いjspm slowとかでぐぐてみたんですけど特に計測してるサイトとか無かったのでまあ問題ないものかなとReactを書き始めてみました。 すると表示が明らかに待たされて違和感バリバリだったのでwatchifyでも変換したファイルを読み込む場合とくらべてみました。

jspmの場合

https://github.com/uzimith/flux-todo-practice/tree/692aa4eb33afd1fd372d51da10b517db4384d0d7

1.30 s

watchifyの場合

https://github.com/uzimith/flux-todo-practice/tree/4d2bc63b8026cdc42ebb5d2bac99733eecb188b9#

275 ms

さすがに文字を出すだけでこの速度になるようでは実用性に欠けるのではないかと思っていたところProdoction環境用のファイル生成法がありました。 jspm bundleしてbuild.jsを作って読み込ませるといいらしい。

324 msと、かなり早くなりました。とはいえwatchifyは250ms前後で安定してるのでこのコードの場合はwatchifyの生成するコードの方が若干速いです。

所感

jspmでもbundleすれば十分速度が出るっぽいです。実はトップページを目を通せばひと目でわかることなんですが。

For production, optimize into a bundle, layered bundles or a self-executing bundle with a single command.

とはいえ自分的には開発中レンダリングが遅いほうが苦になるのが目に見えてるし、JSXで書くためにパスの指定が.jsx!になるとださいし、 6to5ify,reactify,uglifyなどwatchifyで機能性は十分、むしろ高いとjspmを使う理由は見当たらないといったところです。

ビルドのほうが時間がかかるということならjspmのほうがいいと思いますが、大規模なプロジェクトとかだとそうなんですかね？