Added a --visualize option to generate build output stats

.dockerignore

@@ -0,0 +1,4 @@
+.git/
+.vscode/
+dist/
+node_modules/

.gitignore

@@ -13,3 +13,5 @@ yarn.lock
 .idea
 .rts2*
 sizes.csv
+test/fixtures/visualize/stats.html
+.eslintcache

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:12
+
+WORKDIR /microbundle
+
+ADD package.json .
+RUN npm install
+
+VOLUME test/__snapshots__
+ADD . .

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

package.json

@@ -13,6 +13,8 @@
     "prepare:babel": "babel src/*.js -d dist && npm t",
     "lint": "eslint src",
     "test": "npm run -s lint && npm run -s build && cross-env BABEL_ENV=test jest",
+    "pretest:docker": "docker build -t microbundle .",
+    "test:docker": "docker run -v $(pwd)/test/__snapshots__:/microbundle/test/__snapshots__ -t microbundle yarn test",
     "release": "npm run -s prepare && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "repository": "developit/microbundle",
@@ -75,6 +77,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",

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';
@@ -587,6 +588,7 @@ function createConfig(options, entry, format, writeMeta) {
 							typescript: !!useTypescript,
 						},
 					}),
+					options.visualize && visualizer(),
 					options.compress !== false && [
 						terser({
 							sourcemap: true,

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 })

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"
+  }
+}

test/fixtures/visualize/src/index.js

@@ -0,0 +1,3 @@
+const camelCase = require('camelcase');
+
+module.exports = camelCase('foo-bar');

test/index.test.js

@@ -6,7 +6,7 @@ import { buildDirectory, getBuildScript } from '../tools/build-fixture';
 
 const FIXTURES_DIR = `${__dirname}/fixtures`;
 const DEFAULT_SCRIPT = 'microbundle';
-const TEST_TIMEOUT = 11000;
+const TEST_TIMEOUT = 18000;
 
 const join = (arr, delimiter = '') => arr.join(delimiter);
 

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;