Bundlesize is a simple CLI tool that checks file(s) size and report if limits have been reached.

> npm install --dev @node-cli/bundlesize

A configuration file must be provided via the -c parameter.

For the size option, it must export an object named "size" which is an array of objects with the following properties:

• path: the path to the file to check
• limit: the limit to check against

For the report option, it must export an object named "report" which is an object with the following properties:

• header: the header to display (optional, string)
• footer: the footer to display (optional, function receiving a boolean indicating if the limit has been reached, and a value corresponding to the diff. It must return a string)
• previous: the previous path to the report to compare against (required, string)
• current: the current path to the report to compare against (required, string)
• columns: the columns to display (optional, array of objects)

export default {
	sizes: [
		{
			path: "dist/some-bundle.js",
			limit: "10 kB",
		},
	],
};

export default {
	sizes: [
		{
			path: "dist/some-bundle.js",
			limit: "10 kB",
		},
		{
			path: "dist/some-other-bundle.js",
			limit: "100 kB",
		},
	],
};

export default {
	sizes: [
		{
			path: "dist/**/some-bundle.js",
			limit: "10 kB",
		},
		{
			path: "dist/**/some-other-bundle-*.js",
			limit: "100 kB",
		},
		{
			path: "dist/**/extra-+([a-zA-Z0-9]).js",
			limit: "100 kB",
		},
	],
};

The special keyword <hash> can be used to match a hash in the filename. It cannot be used in conjunction with the single star (*) glob pattern, and it cannot be used if multiple files match the pattern.

NOTE: Using <hash> is equivalent to using +([a-zA-Z0-9]) in the glob pattern. However, the result will be indexed with the hash key instead of the match key, so that subsequent scripts can use the hash value.

The special keyword <semver> can be used to match a version in the filename. It cannot be used in conjunction with the single star (*) glob pattern, and it cannot be used if multiple files match the pattern.

NOTE: Using <semver> is equivalent to using * in the glob pattern. However, the result will be indexed with the semver key instead of the match key, so that subsequent scripts can use the semver value.

export default {
	report: {
		prev: "stats/previous.json",
		current: "stats/current.json",
	},
};

export default {
	report: {
		header: "## My custom header",
		prev: "stats/previous.json",
		current: "stats/current.json",
	},
};

export default {
	report: {
		footer: (limitReached, diff) => {
			return `## My custom footer: ${limitReached} ${diff}`;
		},
		prev: "stats/previous.json",
		current: "stats/current.json",
	},
};

export default {
	report: {
		columns: [
			{ status: "Status" },
			{ file: "File" },
			{ size: "Size" },
			{ limits: "Limits" },
		],
		prev: "stats/previous.json",
		current: "stats/current.json",
	},
};

"scripts": {
	"stats": "bundlesize -c bundlesize.config.js"
}

"scripts": {
	"stats": "bundlesize -c bundlesize.config.js -o stats.json"
}

"scripts": {
  "stats": "bundlesize -c bundlesize.config.js -o stats.json -s"
}

"scripts": {
  "stats": "bundlesize -c bundlesize.config.js -o stats.json -p 'My prefix'"
}

"scripts": {
  "stats": "bundlesize -c bundlesize.config.js -o stats.json -p \"$npm_package_version\""
}

"scripts": {
	"stats": "bundlesize -c bundlesize.config.js --type report"
}

> bundlesize --help

MIT © Arno Versini