読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

必要なものだけ!jQueryをカスタムビルドしてファイルサイズを減らそう

jQuery Node.js 環境構築

必要なものだけ!jQueryをカスタムビルドしてファイルサイズを少なくしてみよう

サイトを作っていて、「チャチャッとこういう事実装したい」時、jQueryは定番なライブラリです。

大抵は、jQueryサイトからダウンロードしたり、 CDNからリンクをコピーしたりして使います。
あとは、bowerなどcliツールでダウンロードしたり。
ただそれだと、機能すべてを読み込んでしまいます。

近頃はモバイルにも対応したサイトが多くなって、 それに対応する分コードの記述量が増え重くなっていっています。
僕もなんだかんだで気になりだしてきて、無駄な物は省いて、できるだけサイトを軽くしたいなぁと思いました。
そんな時、jQueryは「使うトコだけ」なファイルを作れると知り、実際に試してみました。これはその方法です。 (gitとNodeJSは各自でインストールしておいてください)

jQueryをローカルへクローンしてくる

どこでもいいので、jQueryをローカルへ持ってきます。

git clone git@github.com:jquery/jquery.git && cd jquery

次のコマンドでカスタムビルドに必要なプラグインをインストールします。

npm run build && npm install -g grunt-cli

あとは、カスタムビルドするコマンドを実行するだけです。

grunt custom:[使わない機能],[使わない機能],[使わない機能],...

上の[使わない機能]のように、機能の名前をカンマ区切りで書いていきます。
実行後、dist/に使う機能だけのjquery(.min).jsができてるはずです!

機能の名前には以下のようなものがあるので参考に。
https://github.com/jquery/jquery#modules

  1. ajax
  2. ajax/xhr
  3. ajax/script
  4. ajax/jsonp
  5. css
  6. css/showHide(show, hide, toggle のアニメーションとその関連(effects))
  7. deprecated
  8. dimensions
  9. effects)
  10. event
  11. event/alias(click, mouseoverなど)
  12. offset
  13. wrap(wrap, wrapAll, wrapInner, unwrap)
  14. core/ready($(document).ready())
  15. deferred
  16. exports/global
  17. exports/amd

例えば、ajaxを全く使わないのであれば

grunt custom:-ajax

と実行するとajax関連のメソッドがゴソっと無くなっているはずです。

console.dir($)
// -> ajax関連メソッドがない

これだけでもjquery.min.jsのサイズを82Kから73Kへ減らすことができました!

Package.jsonで少し楽にする(NodeJSなプロジェクトの場合)

このようなディレクトリ構造だとして。

.
├── jquery
├── package.json
└── site
    └── scritps

使うものが変わる度、コマンドを入力するのは面倒くさいので、npm runで使えるようにします。
プロジェクトのpackage.jsonを開いて、次のようにします。*1

  ...略
  "scripts": {
    "build:jquery": "(cd jquery && grunt custom:-ajax,-deprecated,-offset,-wrap)",
    "postbuild:jquery": "cp jquery/dist/jquery.min.js site/scripts"
  },
  ...略

site/scriptsの部分に、実際に置きたいパスを書く)

これで、npm run build:jqueryと叩くと自動で、 site/scripts/jquery.min.jsが作られてるので手間が少し減ります。

せめて仕事以外では、こんな所にも手間暇かけたい僕でした。

*1:posthogeは、hogeの後に実行されるスクリプトです