Added a visualize option to generate build output stats

Updated readme Added the new visualize flag Added a test with a postbuild script that copies the stats.html Allow tests to have a postbuild script! :)
developit · AlexHayton · Nov 23, 2019 · Nov 23, 2019 · Nov 23, 2019 · Jan 2, 2020
commit 12b6e95a866ad09cbff12b328421f7656e2887b4
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ yarn.lock
 .idea
 .rts2*
 sizes.csv
+test/fixtures/visualize/stats.html
+.eslintcache
diff --git a/README.md b/README.md
@@ -106,6 +106,10 @@ You can specify output builds in a `package.json` as follows:
 "types": "dist/foo.d.ts",       // TypeScript typings
 ```
 
+### Analyze your bundle size
+
+Use the `--visualize` flag in the cli to generate a `stats.html` file at build time, showing the sizes of the files that are included in your bundled output. Uses [rollup-plugin-visualizer](https://www.npmjs.com/package/rollup-plugin-visualizer).
+
 ### Mangling Properties
 
 Libraries often wish to rename internal object properties or class members to smaller names - transforming `this._internalIdValue` to `this._i`. Microbundle doesn't currently do this by default, but it can be enabled by adding a "mangle" property to your package.json, with a pattern to control when properties should be mangled. To mangle all property names beginning an underscore, add the following:
@@ -151,6 +155,7 @@ Options
 	--raw            Show raw byte size  (default false)
 	--jsx            A custom JSX pragma like React.createElement (default: h)
 	--tsconfig       Specify the path to a custom tsconfig.json
+	--visualize      Generate bundle size visualization (stats.html)
 	-h, --help       Displays this message
 
 Examples

diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-typescript2": "^0.23.0",
+    "rollup-plugin-visualizer": "^3.2.2",
     "sade": "^1.6.1",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",

diff --git a/src/index.js b/src/index.js
@@ -18,6 +18,7 @@ import brotliSize from 'brotli-size';
 import prettyBytes from 'pretty-bytes';
 import typescript from 'rollup-plugin-typescript2';
 import json from 'rollup-plugin-json';
+import visualizer from 'rollup-plugin-visualizer';
 import logError from './log-error';
 import { readFile, isDir, isFile, stdout, stderr, isTruthy } from './utils';
 import camelCase from 'camelcase';
@@ -358,13 +359,15 @@ async function getOutput({ cwd, output, pkgMain, pkgName }) {
 }
 
 async function getEntries({ input, cwd }) {
-	let entries = (await map([].concat(input), async file => {
-		file = resolve(cwd, file);
-		if (await isDir(file)) {
-			file = resolve(file, 'index.js');
-		}
-		return file;
-	})).filter((item, i, arr) => arr.indexOf(item) === i);
+	let entries = (
+		await map([].concat(input), async file => {
+			file = resolve(cwd, file);
+			if (await isDir(file)) {
+				file = resolve(file, 'index.js');
+			}
+			return file;
+		})
+	).filter((item, i, arr) => arr.indexOf(item) === i);
 	return entries;
 }
 
@@ -585,6 +588,7 @@ function createConfig(options, entry, format, writeMeta) {
 							typescript: !!useTypescript,
 						},
 					}),
+					options.visualize && visualizer(),
 					options.compress !== false && [
 						terser({
 							sourcemap: true,

diff --git a/src/prog.js b/src/prog.js
@@ -44,7 +44,12 @@ export default handler => {
 			'A custom JSX pragma like React.createElement (default: h)',
 		)
 		.option('--tsconfig', 'Specify the path to a custom tsconfig.json')
-		.example('microbundle build --tsconfig tsconfig.build.json');
+		.example('microbundle build --tsconfig tsconfig.build.json')
+		.option(
+			'--visualize',
+			'Generate bundle size visualization (stats.html)',
+			false,
+		);
 
 	prog
 		.command('build [...entries]', '', { default: true })

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
diff --git a/test/fixtures/visualize/package.json b/test/fixtures/visualize/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "visualize",
+  "scripts": {
+    "build": "microbundle --visualize",
+    "postbuild": "mv stats.html dist/"
+  },
+  "peerDependencies": {
+    "camelcase": "^5.3.1"
+  }
+}
diff --git a/test/fixtures/visualize/src/index.js b/test/fixtures/visualize/src/index.js
@@ -0,0 +1,3 @@
+const camelCase = require('camelcase');
+
+module.exports = camelCase('foo-bar');
diff --git a/tools/build-fixture.js b/tools/build-fixture.js
@@ -2,10 +2,12 @@ import { resolve } from 'path';
 import { promisify } from 'es6-promisify';
 import shellQuote from 'shell-quote';
 import _rimraf from 'rimraf';
+import { exec as _exec } from 'child_process';
 import { readFile } from '../src/utils';
 import createProg from '../src/prog';
 import microbundle from '../src/index';
 
+const exec = promisify(_exec);
 const rimraf = promisify(_rimraf);
 
 const FIXTURES_DIR = resolve(`${__dirname}/../test/fixtures`);
@@ -28,7 +30,7 @@ const parseScript = (() => {
 	};
 })();
 
-export const getBuildScript = async (fixturePath, defaultScript) => {
+const getPackageJson = async (fixturePath) => {
 	let pkg = {};
 	try {
 		pkg = JSON.parse(
@@ -37,9 +39,19 @@ export const getBuildScript = async (fixturePath, defaultScript) => {
 	} catch (err) {
 		if (err.code !== 'ENOENT') throw err;
 	}
+	return pkg;
+};
+
+export const getBuildScript = async (fixturePath, defaultScript) => {
+	const pkg = await getPackageJson(fixturePath);
 	return (pkg && pkg.scripts && pkg.scripts.build) || defaultScript;
 };
 
+export const getPostBuildScript = async fixturePath => {
+	const pkg = await getPackageJson(fixturePath);
+	return pkg && pkg.scripts && pkg.scripts.postbuild;
+};
+
 export const buildDirectory = async fixtureDir => {
 	let fixturePath = resolve(FIXTURES_DIR, fixtureDir);
 	if (fixtureDir.endsWith('-with-cwd')) {
@@ -65,6 +77,11 @@ export const buildDirectory = async fixtureDir => {
 		cwd: parsedOpts.cwd !== '.' ? parsedOpts.cwd : resolve(fixturePath),
 	});
 
+	const postBuildScript = await getPostBuildScript(fixturePath);
+	if (postBuildScript) {
+		await exec(postBuildScript);
+	}
+
 	process.chdir(prevDir);
 
 	return output;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const camelCase = require('camelcase');

		module.exports = camelCase('foo-bar');