feat: Add --json option to generate build stats

README.md

@@ -65,6 +65,8 @@ $ preact build
   --less, -l        Build and compile LESS files                  [default: false]
   --sass, -s        Build and compile SASS files                  [default: false]
   --prerender       Pre-render static app content.                [default: true]
+  --clean           Clear output directory before building.       [default: true]
+  --json            Generate build statistics for analysis.       [default: false]
 
 $ preact watch
 

src/commands/build.js

@@ -3,7 +3,7 @@ import promisify from 'es6-promisify';
 import rimraf from 'rimraf';
 import asyncCommand from '../lib/async-command';
 import webpackConfig from '../lib/webpack-config';
-import runWebpack, { showStats } from '../lib/run-webpack';
+import runWebpack, { showStats, writeJsonStats } from '../lib/run-webpack';
 
 export default asyncCommand({
 	command: 'build [src] [dest]',
@@ -41,6 +41,10 @@ export default asyncCommand({
 		clean: {
 			description: 'Clear output directory before building.',
 			default: true
+		},
+		json: {
+			description: 'Generate build statistics for analysis.',
+			default: false
 		}
 	},
 
@@ -54,5 +58,9 @@ export default asyncCommand({
 
 		let stats = await runWebpack(false, config);
 		showStats(stats);
+
+		if (argv.json) {
+			await writeJsonStats(stats)
+		}
 	}
 });

src/lib/run-webpack.js

@@ -1,3 +1,5 @@
+import { resolve } from 'path';
+import fs from 'fs.promised';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import chalk from 'chalk';
@@ -52,3 +54,41 @@ export function showStats(stats) {
 
 	return stats;
 }
+
+export function writeJsonStats(stats) {
+	const outputPath = resolve(process.cwd(), 'stats.json')
+	const jsonStats = stats.toJson({
+		json: true,
+		chunkModules: true,
+		source: false,
+	})
+
+	jsonStats.modules.forEach(normalizeModule)
+	jsonStats.chunks.forEach(c => c.modules.forEach(normalizeModule))
+
+	return fs.writeFile(outputPath, JSON.stringify(jsonStats))
+		.then(() => {
+			process.stdout.write('\nWebpack output stats generated.\n\n')
+			process.stdout.write('You can upload your stats.json to:\n')
+			process.stdout.write('- https://chrisbateman.github.io/webpack-visualizer/\n')
+			process.stdout.write('- https://webpack.github.io/analyse/\n')
+		})
+}
+
+const normalizeModule = m => {
+	const keysToNormalize = ['identifier', 'name', 'module', 'moduleName', 'moduleIdentifier']
+
+	keysToNormalize.forEach(key => {
+		if(key in m) {
+			m[key] = normalizeName(m[key])
+		}
+	})
+
+	if (m.reasons) {
+		m.reasons.forEach(normalizeModule)
+	}
+
+	return m
+}
+
+const normalizeName = p => p.substr(p.lastIndexOf('!') + 1)