jQuery カスタムビルド
まずは github のリポジトリから jQuery を cloneします
github から clone
$ git clone git@github.com:jquery/jquery.git
https://github.com/jquery/jquery.git
での clone でもOK!
clone した jquery のディレクトリに移動して、 npm run build
$ cd jquery && npm run build
以前であれば、$ npm install -g grunt-cli
と grunt-cli のインストールをしてあることが前提でしたが、今回は npm run build
で grunt-cli もプロジェクトのモジュールにインストールされます。
尚、 $ npm run build
では、 $ npm install
と $ grunt
が自動で実行されるコマンドで、$ grunt
のコマンドにはフルバージョンの jQuery がビルドされるようになっています。
カスタムビルドのモジュール
カスタムビルドでは、不要なモジュールを指定することで、そのモジュールを除外してビルドします。
尚、core
と selector
は除外できないですが、その他のモジュールは、以前よりも細かい指定でモジュールを指定できるようになっています。
除外できるモジュールの一覧は README.md を参照してください。
Github : jquery/README.md at master · jquery/jquery
カスタムビルドを試した
カスタムビルドを試して、利用できなくなっているか確認してみます。
jQuery カスタムビルド
jQuery 1.11.0から event/aliasとCSSの除外
$ grunt custom:-event/alias,-css
event の alias と css を除外してみました。
以前のバージョンの除外では、 -event-alias
となっていたのですが、最新では -event/alias
と、階層構造でスラッシュで区切って除外するようになったようです。
カスタムビルドしたJSを使ったサンプル
.click()
が使えなくなった例と、そのかわりに動くための方法のデモです。
jQuery 1.11.0のCSSとevent/aliasを削除(動作しないサンプル)
jQuery 1.11.0のCSSとevent/aliasを削除(動作するサンプル)
どれくらい軽量に?
jQuery 1.11.0 のフルバージョンがおよそ 96416 byte で、event/alisa と css の2つを除外しただけだと 95798 bytes でした。