Skip to content

Record / Frontend

軽量化対策のため jQuery UI カスタムビルドでDatepicker だけ使用

jQuery UI の Datepicker はいろんな案件で使われているので、慣れているし、ので、扱いやすいです。ただ、jsファイルのサイズが大きいので軽量化をしたいです。PageSpeed Insights 案件で小さな努力が必要です。

jQuery UI の公式ビルダー

jQuery UI の公式ビルダーで必要な機能だけを選択してビルドできます。

  • 「Core」から「Widget」「Position」（カレンダーのポップアップに必要）をチェック
  • 「Widgets」で Datepicker のみチェック
  • 「Effects」はチェックを外す
  • テーマも「Base」などシンプルなものにしてOK

「Download」ボタンを押して取得

使用したい機能にチェック入れる

容量は 200KB ほど小さくなります

jsは特にファイルサイズが小さくなる

コード

使用のデモページ

Datepicker jQuery UI
https://usual.tools/tech/jquery/datepicker/02

Back to Discoveries