jQuery UIで必要な機能のみ読み込むようにカスタマイズする

jQuery UIを使う機会があったのですが、ダウンロードする際必要な機能のみにカスタマイズできるようだったので試してみました。

カスタマイズ方法

公式サイトにアクセスして、右側の「Custom Download」をクリックします。

このページでカスタマイズを行います。
まずバージョンですが、古い案件で使うとかでない限り、基本的には1.12.1を選べば問題ないです。
次にComponentsの選択ですが、そのままだとどれが必要・不必要なのかがわかりにくいので、一旦 Components > Toggle All のチェックを外します。

全てのチェックが外れたかと思いますので、その上で「Interactions」と「Widgets」の項目から使いたい機能をチェックします。
今回はInteractions > Sortable とWidgets > Autocomplete を選択してみます。

チェックを追加してみるとわかりますが、チェックした項目に必要な別項目がある場合、自動でチェックを入れてくれるようになっています。

逆にチェックを外そうとした場合も、チェックしている他の項目でその機能を使っているものがある場合はアラートで警告を出してくれます。

最後にThemeですが、今回はNo Theme を選択してみます。
設定が完了したら「Download」をクリックします。

ファイルを確認してみたところ、jquery-ui.min.cssが元サイズ32KBに対して2KB、jquery-ui.min.jsが元サイズ254KBに対して60KBなので、かなり縮小できました。

ダウンロードしたファイルを実際に使ってみます。
まずはCSSとJavaScriptを読み込みます。

<link rel="stylesheet" href="./jquery-ui.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery-ui.min.js"></script>

次に操作する要素を追加します。

<ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<input type="text" class="autocomplete" placeholder="半角英字で入力">

最後にJavaScriptを記述します。

$(function() {
	$('.sortable').sortable();

	var name = [
		'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
		'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
		'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
		'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
	];
	$('.autocomplete').autocomplete({
		source: name
	});
});

SortableとAutocompleteの動作を確認できました。
jQuery UIをカスタマイズするデモページ