UIkitを自分でビルドする

Published by @SoNiceInfo at 4/1/2020

UIkitを必要なCSS/JavaScriptだけを読み込んでビルドするとサイズが小さくなり読み込み速度の向上が期待できます。
例えば標準では263KBあるuikit.min.cssがこのサイトでは121KBまで縮小できています。

前提知識

UIkitを自分でビルドするのに必要には以下のものが必要です。
このページでは前提知識があることを前提に進みます。

• Terminalを触れる知識
• git
• node.js
• yarn / npm

UIkitのソースコードをダウンロードする

githubでUIkitのソースコードが公開されているのでダウンロードします。
uikit/uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces | github.com

git clone git://github.com/uikit/uikit.git

必要なCSSモジュールを選択する

以下のファイルでCSSをビルドする際に必要なモジュールをimportしています。

uikit/src/less/components/_import.less

不要なモジュールはコメントアウトして読み込まないようにしましょう。
使わないからと言ってコメントアウトするとエラーが出るモジュールもあるので気をつけてください。
例:

// Base
@import "variables.less";
@import "mixin.less";
@import "base.less";

// Elements
@import "link.less";
@import "heading.less";
@import "divider.less";
@import "list.less";
// @import "description-list.less";
@import "table.less";
@import "icon.less";
// @import "form-range.less";
@import "form.less"; // After: Icon, Form Range
// @import "button.less";

必要なJavaScriptモジュールを選択する

以下のファイルでJavaScriptをビルドする際に必要なモジュールをimportしていますのでこちらも不要なモジュールはコメントアウトします。

uikit/src/js/components/index.js
uikit/src/js/core/index.js

例:

// export {default as Countdown} from './countdown';
export {default as Filter} from './filter';
// export {default as Lightbox} from './lightbox';
// export {default as LightboxPanel} from './lightbox-panel';
// export {default as Notification} from './notification';
// export {default as Parallax} from './parallax';
// export {default as Slider} from './slider';
// export {default as SliderParallax} from './slider-parallax';
// export {default as Slideshow} from './slideshow';
// export {default as SlideshowParallax} from './slideshow-parallax';
// export {default as Sortable} from './sortable';
// export {default as Tooltip} from './tooltip';
export {default as Upload} from './upload';

ビルドする

不必要なモジュールをコメントアウトしたらビルドします。
実行例:

[d1v1b@terminal] yarn compile
yarn run v1.22.1
$ yarn compile-less && yarn compile-js
$ yarn icons && node build/less
$ node build/icons
dist/css/uikit-core.css 172.47kb
dist/css/uikit.css 181.11kb
dist/css/uikit-core.min.css 110.61kb
dist/css/uikit.min.css 118.05kb
$ node build/build
dist/js/components/notification.js 4.34kb
dist/js/components/notification.min.js 2.14kb
dist/js/components/upload.js 6.24kb
dist/js/components/upload.min.js 2.82kb
dist/js/uikit-icons.js 67.79kb
dist/js/uikit-icons.min.js 62.49kb
dist/js/components/countdown.js 4.59kb
dist/js/components/filter.js 12.12kb
dist/js/components/countdown.min.js 2.04kb
dist/js/components/filter.min.js 4.98kb
dist/js/components/sortable.min.js 7.20kb
dist/js/components/sortable.js 17.13kb
dist/js/components/tooltip.min.js 6.32kb
dist/js/components/tooltip.js 14.99kb
tests/js/test.js 32.15kb
tests/js/test.min.js 12.09kb
dist/js/components/slider-parallax.js 16.08kb
dist/js/components/parallax.js 15.05kb
dist/js/components/slider-parallax.min.js 5.77kb
dist/js/components/parallax.min.js 5.37kb
dist/js/components/slider.js 33.45kb
dist/js/components/slider.min.js 13.77kb
dist/js/components/slideshow.js 29.72kb
dist/js/components/lightbox-panel.js 51.99kb
dist/js/components/slideshow-parallax.min.js 5.78kb
dist/js/components/lightbox-panel.min.js 21.22kb
dist/js/components/slideshow-parallax.js 16.08kb
dist/js/components/slideshow.min.js 11.99kb
dist/js/uikit-core.js 224.76kb
dist/js/uikit-core.min.js 87.30kb
dist/js/uikit.min.js 130.43kb
dist/js/uikit.js 334.69kb
dist/js/components/lightbox.js 54.25kb
dist/js/components/lightbox.min.js 22.19kb
✨  Done in 13.96s.

サイトに使う

ビルドしたCSS/JavaScriptは以下のフォルダにあります。
適宜必要なものを自分のサイトで使いましょう。

uikit/dist/css/uikit.min.css
uikit/dist/js/uikit.min.js
uikit/dist/js/uikit-icons.min.js