[フロントエンド] jQueryのカスタムビルド機能を用いて、小さなサイズのjQueryを使おう！
こんにちは、@yoheiMuneです。
Web業界で知らない人はいないんじゃないだろうかというjQuery。実はjQueryの機能を選んで自由にカスタマイズできるって知ってますか？ 今日はjQueryのカスタムビルドを用いて、サイズを減らす試みを紹介したいと思います。
今回はそのカスタムビルドを紹介します。まずはjQueryをビルドする手順を紹介します。
以上を実行すると
次には本題のjQueryのカスタムビルドを説明します。
例えば以下のようなモジュールを削減することができます。
次に実際にカスタムビルドを行う方法を説明します。
次にはそれぞれのモジュールを削除した場合に、どれだけのダイエット効果があるのかを見ていきましょう。
ものによってダイエット効果が違いますが、必要機能のみに絞り込むと少しサイズの小さいjQueryを使えそうです。
次には案件でも利用しているカスタムビルドを紹介します。
また近年のブラウザであれば、jQueryで良く用いるイベントのOn/OFF、Ajax、クラスの付け替えはちょっとした実装で実現することができます。 プロジェクトに余裕があればjQueryを使わない選択肢も良いかもしれないですね！
今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！
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のビルドタスクを実行します。 これらの処理を実行するためには、
node、npm、gruntの設定が必要ですので、無い方はそれらを導入してください。以上を実行すると
dist/ディレクトリにビルド後のモジュールが置かれます。
これで手動でのビルドができました。次には本題のjQueryのカスタムビルドを説明します。
jQueryのカスタムビルドを行う
上記では多くのサイトで利用されている全機能を持つjQueryのビルドを紹介しました。 ここでは自由に機能を削減できるカスタムビルドについて説明します。削減できる機能一覧
カスタムビルドではcoreとselectorを除く全機能を削減することができます。
削減するためには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) |
次には案件でも利用しているカスタムビルドを紹介します。
カスタムビルドのサンプル
例えば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を使わない選択肢も良いかもしれないですね！
今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！
