2014/08/11更新

[フロントエンド] jQueryのカスタムビルド機能を用いて、小さなサイズのjQueryを使おう!

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
Web業界で知らない人はいないんじゃないだろうかというjQuery。実はjQueryの機能を選んで自由にカスタマイズできるって知ってますか? 今日はjQueryのカスタムビルドを用いて、サイズを減らす試みを紹介したいと思います。

画像

Special Thanks to https://flic.kr/p/7fADmS




目次




jQueryのカスタムビルド

この手順説明は、執筆時点で最新のjQuery2.1.1での説明となります。

jQueryは通常、jquery.com/downloadから取得することができます。 しかしjQueryの開発はGithub上で行われており、そちらを利用することでjQueryを自分でもビルドすることもできてしまいます。 そしてそのビルドではカスタムビルドがサポートされており、制作するサイトで必要になる機能のみでビルドすることが可能です。 不要な機能を省くことでサイズを削減することができ、便利なjQueryをより小さいサイズで利用することが可能です。 これは、特にAndroidやiPhoneといったネットワークの弱いモバイル向けサイトには効果が高いものです。
今回はそのカスタムビルドを紹介します。まずはjQueryをビルドする手順を紹介します。



jQueryを自分でビルドする

jQueryを手動でビルドするには以下の2ステップで行います。

1. Githubからダウンロード

まずはjQueryの開発コードをGithubからダウンロードします。
$ git clone git://github.com/jquery/jquery.git
ダウンロードしたらカレントディレクトリに「jquery」というディレクトリができているので、そちらに移ります。
$ cd jquery


2. ビルドを行う

そしてjQueryのビルドを行うには、以下のコマンドを実行します。
$ npm run build
この処理では、必要なnpmモジュールをインストールして、Gruntのビルドタスクを実行します。 これらの処理を実行するためには、nodenpmgruntの設定が必要ですので、無い方はそれらを導入してください。

以上を実行するとdist/ディレクトリにビルド後のモジュールが置かれます。 これで手動でのビルドができました。

次には本題のjQueryのカスタムビルドを説明します。



jQueryのカスタムビルドを行う

上記では多くのサイトで利用されている全機能を持つjQueryのビルドを紹介しました。 ここでは自由に機能を削減できるカスタムビルドについて説明します。


削減できる機能一覧

カスタムビルドではcoreselectorを除く全機能を削減することができます。 削減するためにはGithubページsrcフォルダ以下で、削減したい対象を「.js」抜きで指定します。
例えば以下のようなモジュールを削減することができます。
機能名 説明
ajax Ajaxに関するすべての機能を削除します。$.ajax()$.get()$.post()$.ajaxSetup.load()、transportsや、.ajaxStart()といったajax関連のイベントの省略名を削除することができます。
ajax/xhr XMLHTTPRequest AJAXのみを削除することができます。
ajax/script <script>によるAjax機能を削除することができます。
ajax/jsonp JSONPによるAjax機能を削除することができます。
css .css()とアニメーションしない.show().hide().toggle()を削除することができます。またcssモジュールに依存するeffects、dimensions、offset、といったモジュールも削除されます。
deprecated 非推奨メソッドでまだ削除されていないメソッドを削除することができます。現在のところ.andSelf()のみです。
dimensions .width().height()を削除することができます。inner-outer-といったバリエーションのものも削除されます。
effects .animate()やその省略版の.slideUp().hide("slow")を削除することができます。
event .on().off()などのイベント関連のすべての機能を削除することができます。またevent/aliasも削除されます。
event/alias .click().mouseover()といったイベントのすべてのショートハンドを削除することができます。
offset .offset().position().offsetParent().scrollLeft().scrollTop()メソッドを削除することができます。
wrap .wrap().wrapAll().wrapInner().unwrap()を削除することができます。
core/ready scriptファイルをbody閉じタグの直前に置いてある場合には、このredyモジュールを削除することができます。これを削除するとjQuery(document).ready()はnot functionとなり、.on("ready", ...)などのイベントは発火しなくなります。
deferred jQueryのディファード機能を削除することができます。またjQuery.Callbacksも削除されます。注意すべき点はdeferredを削除しても、これに依存するajax、effects、core/readyは存続し続けます。それらモジュールを削除するか、それらを利用する場合にはjQuery.Deferredの代替となるモジュールをロードする必要があります。
exports/global windowオブジェクトに$やjQueryといったグローバルオブジェクトをアタッチしないようになります。
exports/amd AMD定義を削除します。
sizzle jQuery独自のsizzleエンジンを削除することができます。sizzleエンジンの代わりに、ブラウザのquerySelectorAllが利用されます。
次に実際にカスタムビルドを行う方法を説明します。


カスタムビルドを実行する

カスタムビルドを行うためには、gruntタスクのcustomを利用します。例えばajax機能を削除したい場合には、以下のように行います。
$ grunt custom:-ajax
上記の場合はajaxモジュールが削除された結果がdist/以下に生成されます。 ただ、customタスクだけだとどれだけサイズが減ったのかが分かりづらいので、compare_sizeタスクも一緒に実行すると、ダイエット効果が見えてよいです。
$ grunt custom:-ajax compare_size
Running "custom:-ajax" (custom) task
Creating custom build...


Running "build:all:*:-ajax" (build) task
-ajax
-ajax/jsonp
-ajax/load
-ajax/parseJSON
-ajax/parseXML
-ajax/script
-ajax/var/nonce
-ajax/var/rquery
-ajax/xhr
-manipulation/_evalUrl
-event/ajax
>> File 'dist/jquery.js' created.

Running "uglify:all" (uglify) task
File dist/jquery.min.map created (source map).
File dist/jquery.min.js created: 215.98 kB → 74.9 kB

Running "dist" task

Running "compare_size:files" (compare_size) task
   raw     gz Sizes                                                            
215984  63685 dist/jquery.js                                                   
 74896  25789 dist/jquery.min.js                                               

   raw     gz Compared to master @ 995f70777ac6c0f988a44807ef1399e73937b2ee    
+23698  +6191 dist/jquery.js                                                   
 +7578  +2147 dist/jquery.min.js                                               

   raw     gz Compared to last run                                             
+23698  +6191 dist/jquery.js                                                   
 +7578  +2147 dist/jquery.min.js                                               

Saved as: master

Done, without errors.
ajaxモジュールを削除した場合のjquery.min.jsのgzip後のサイズは、25789Bytesということが分かります。

次にはそれぞれのモジュールを削除した場合に、どれだけのダイエット効果があるのかを見ていきましょう。


各モジュールのダイエット効果を見てみる

ここでは各モジュールを削除した場合のダイエット効果を検証します。どれくらいのシェイプアップされるのでしょうか。

単位はBytesです。

削除対象 jquery.js jquery.min.js jquery.min.js(gzip)
フルバージョン 246197 84163 29438
-ajax 215984 74896 25789 (-3649)
-ajax/xhr 242846 83118 29048 (-390)
-ajax/script 245002 83561 29258 (-180)
-ajax/jsonp 243803 83340 29161 (-277)
-css 199399 68122 23769 (-5669)
-deprecated 246060 84120 29419 (-19)
-dimensions 244540 83668 29282 (-158)
-effects 226164 76563 26744 (-2694)
-event 220691 74517 26235 (-3203)
-event/alias 245181 83545 29236 (-202)
-offset 240919 82235 28805 (-633)
-wrap 244856 83435 29263 (-175)
-core/ready 243909 83525 29232 (-206)
-deferred 241865 82742 28980 (-458)
-exports/global 245677 84051 29390 (-48)
-exports/amd 245263 84109 29417 (-21)
-sizzle 192286 67318 23642 (-5796)
ものによってダイエット効果が違いますが、必要機能のみに絞り込むと少しサイズの小さいjQueryを使えそうです。

次には案件でも利用しているカスタムビルドを紹介します。


カスタムビルドのサンプル

例えばAndroidとiPhone向けのWeb制作の場合、例えば以下のようなカスタムビルドを行うことができます。
# ajax/script, ajax/jsonpはあまり使わない
# cssはclassNameでやり取りするか、elm.styles.xxxを使う
# deprecatedは使わない
# effectsは今風にcss3アニメーションを使う
# event/aliasはやめて、onとoffに統一
# wrapはあまりつかない
# querySelectorAllでできる範囲で十分

$ grunt custom:-ajax/script,-ajax/jsonp,-css,-deprecated,-effects,-event/alias,-wrap,-sizzle compare_size

## 出力は一部省略 ## 
Running "compare_size:files" (compare_size) task
   raw     gz Sizes                                                            
139871  42005 dist/jquery.js                                                   
 48596  17118 dist/jquery.min.js   
この場合だとgzip後のサイズは171,18Bytesで、フルバージョンから12,320Bytesの削減をすることができます。 モバイルであればこの約12KBの削減は大きなもので、初期表示のパフォーマンスに大きく貢献してくれます。



最後に

今日はjQueryのカスタムビルドについて紹介しました。 jQueryのカスタムビルドをプロジェクトに用いる場合は、メンバーのスキルが足りているか、メンバーと共通認識を持てているかが重要となります。 開発効率を落とさずかつサイズを削減できるところを探して、プロジェクトに合ったカスタマイズをしてみてください。

また近年のブラウザであれば、jQueryで良く用いるイベントのOn/OFF、Ajax、クラスの付け替えはちょっとした実装で実現することができます。 プロジェクトに余裕があればjQueryを使わない選択肢も良いかもしれないですね!

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。