やり方

Viteとwebpack

Viteやwebpackのプロジェクトでこのパッケージを使い、デザインを1つだけ読み込んでバンドルを小さく保ち、バンドルに何が入ったかを確かめます。

このパッケージは、型付きのESモジュールで、"sideEffects": false、依存はありません。そのため、バンドラーは読み込んだものだけを残します。インストールして、読み込めば、設定は要りません。

npm install @johnmorrisdotca/koyomi-calendars

Vite

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Koyomi Calendars with Vite</title>
  </head>
  <body>
    <div id="today"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars";
import { monthCalendar } from "@johnmorrisdotca/koyomi-calendars/month";

const now = new Date();
const today = document.querySelector("#today")!;
today.innerHTML = calendarIcon({ theme: "squircle", month: now.getMonth() + 1, day: now.getDate(), year: now.getFullYear() }) + monthCalendar({ year: now.getFullYear(), month: now.getMonth() + 1, design: "desk", size: 320 });

パッケージのルートのcalendarIconは、18のデザインすべてを含みます。monthCalendarは別の読み込み（/month）なので、アイコンだけを描くページには入りません。

webpack

import { fileURLToPath } from "node:url";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: { path: fileURLToPath(new URL("./dist", import.meta.url)), filename: "main.js" },
};

import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars/themes/squircle";

const now = new Date();
const today = document.createElement("div");
today.id = "today";
today.innerHTML = calendarIcon({ month: now.getMonth() + 1, day: now.getDate(), year: now.getFullYear() });
document.body.append(today);

この入口は、themes/squircleというデザイン1つだけを読み込みます。バンドルを小さくする方法はこれです。残りの17のデザインは入りません。webpack 5では、このパッケージにローダーは要りません。

バンドルに何が入ったか

デザイン1つは圧縮して約9 kB（gzipで4 kB）、ライブラリ全体は約49 kB、/monthは約11 kB、/animateは約3 kBです。表と、自分のバンドルの調べ方は、大きさとバンドルにあります。思ったより大きいときは、デザイン1つで足りるところで、パッケージのルートを読み込んでいないか探してください。

ソースを見る GitHub で編集@johnmorrisdotca/koyomi-calendars 0.3.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。