必要なものだけ!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
- ajax
- ajax/xhr
- ajax/script
- ajax/jsonp
- css
- css/showHide(
show
,hide
,toggle
のアニメーションとその関連(effects)) - deprecated
- dimensions
- effects)
- event
- event/alias(
click
,mouseover
など) - offset
- wrap(
wrap
,wrapAll
,wrapInner
,unwrap
) - core/ready(
$(document).ready()
) - deferred
- exports/global
- 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
が作られてるので手間が少し減ります。
せめて仕事以外では、こんな所にも手間暇かけたい僕でした。