Zenn
😊

バンドルサイズを出力するシンプルな Rollup Plugin

2021/06/04に公開
rollup
tech

バンドルサイズを出力するシンプルな Rollup Plugin を作った。

ちょうど一年くらい前、仕事でよく Rollup Plugin を書いたりいじったりする機会があり、そのときにバンドルサイズを出力してくれる Rollup Plugin を探していたのだが、いい感じのがなく、自分で雑に書いていた。

そして最近仕事で小さな SDK 風のものを作って GitHub Packages にパブリッシュする必要が出てきた。そのパッケージのバンドルに Rollup を使うことにしたので、またバンドルサイズを出力してくれる Rollup Plugin が欲しくなった。

また、世の中にいくつかそういうプラグインはあるが、機能が豊富すぎたり、メンテされてなくて動かなかったりするので、自分で最小限のものを持っておきたいという気持ちがあった。

ということでバンドルサイズを出力してくれるシンプルな Rollup Plugin を開発した。

https://github.com/sosukesuzuki/rollup-plugin-bundle-size

以下のコマンドでインストールできる。

npm install --save-dev @sosukesuzuki/rollup-plugin-bundle-size

動かすと以下のような出力が得られる(これは@sosukesuzuki/rollup-plugin-bundle-size自体のビルドに@sosukesuzuki/rollup-plugin-bundle-sizeを使ったときのログ)。

$  npm run build

> @sosukesuzuki/rollup-plugin-bundle-size@0.1.0 build
> rollup -c


./src/index.ts → ./lib/rollup-plugin-bundle-size.cjs.js, ./lib/rollup-plugin-bundle-size.esm.js...
rollup-plugin-bundle-size.cjs.js: 1.36 kB
rollup-plugin-bundle-size.esm.js: 1.31 kB
created ./lib/rollup-plugin-bundle-size.cjs.js, ./lib/rollup-plugin-bundle-size.esm.js in 1.4s

現在の実装はたった19行の TypeScript なので、そのまま内容を掲載する。

import type { Plugin } from "rollup";
import prettyBytes from "pretty-bytes";

function getSize(code: string): string {
  return prettyBytes(Buffer.byteLength(code));
}

export const bundleSize: () => Plugin = function () {
  return {
    name: "bundle-size",
    generateBundle(_options, bundle) {
      for (const [filename, bundled] of Object.entries(bundle)) {
        if (bundled.type === "chunk") {
          console.log(`${filename}: ${getSize(bundled.code)}`);
        }
      }
    },
  };
};

Rollup Plugin を書いたことがない人でも、何をしているかなんとなくわかるだろう。

import している pretty-bytes は https://github.com/sindresorhus/pretty-bytes だ。1337を1.34 kBに整形してくれて便利。

ちなみに、npm へのパブリッシュを GitHub Actions から行えるようにしてみた。

ローカルで npm run release -- --release=minor のようにしてリリーススクリプトを実行すると

Open https://github.com/sosukesuzuki/rollup-plugin-bundle-size/releases/new?tag=v0.2.0 and create new release.

のようなログが出るので、そのリンクから GitHub 上で新しいリリースを作成すると、勝手に npm にパブリッシュされるようになっている。個人的にこれはかなり便利だと思う。

最近自分が管理している他の OSS のリリースフローを見直したいなーと考えていて、最高の npm package リリース体験を模索している。実際、冒頭の理由よりリリースを色々試したくてこのパッケージを開発した側面が大きい。

Discussion