Update analyzer

Author: maier49

package-lock.json

@@ -17,14 +17,15 @@
     "url": "https://github.com/dojo/cli-build-app.git"
   },
   "scripts": {
+    "webpack-bundle-analyzer": "cd src/webpack-bundle-analyzer/client && npm run build:dist && shx mv output/dist ../../../dist/release/webpack-bundle-analyzer/reporter && cd ../../../",
     "artifact:build:pwa": "cd test-app && npm run build:dist:pwa:evergreen && shx mv output/dist output/dist-pwa-evergreen && npm run build:dev:pwa:evergreen && shx mv output/dev output/dev-pwa-evergreen && npm run build:dist:pwa && shx mv output/dist output/dist-pwa && npm run build:dev:pwa && shx mv output/dev output/dev-pwa",
     "artifact:build:app": "cd test-app && npm run build:dist:evergreen && shx mv output/dist output/dist-app-evergreen && npm run build:dev:evergreen && shx mv output/dev output/dev-app-evergreen && npm run build:dist && shx mv output/dist output/dist-app && npm run build:dev && shx mv output/dev output/dev-app",
     "artifact:install": "cd test-app && shx rm -rf node_modules && npm i && npm run install-build-app",
     "artifact:package": "cd dist && npm pack -q ./release && shx mv dojo-cli-build-app-* dojo-cli-build-app.tgz && cd ..",
-    "build:static:dev": "cpx \"{src,tests}/**/*.{d.ts,html,md,json,js,css}\" dist/dev",
-    "build:static:release": "cpx \"src/**/*.{d.ts,json}\" dist/release",
+    "build:static:dev": "cpx \"{src,tests}/**/*.{d.ts,html,md,json,js,css}\" dist/dev && rimraf dist/dev/src/webpack-bundle-analyzer/client",
+    "build:static:release": "cpx \"src/**/*.{d.ts,json}\" dist/release && rimraf dist/release/webpack-bundle-analyzer/client",
     "build:cjs": "tsc",
-    "build": "npm-run-all -p build:** -s dojo-package",
+    "build": "npm-run-all -p build:** -s webpack-bundle-analyzer -s dojo-package && rimraf src/webpack-bundle-analyzer/client/node_modules",
     "clean": "rimraf dist coverage output test-app/output test-app/node_modules",
     "dojo-package": "dojo-package",
     "dojo-release": "dojo-release",
@@ -68,6 +69,7 @@
     "@types/execa": "0.8.0",
     "@types/express": "4.11.0",
     "@types/express-serve-static-core": "4.16.4",
+    "@types/fs-extra": "^8.1.0",
     "@types/globby": "6.1.0",
     "@types/gzip-size": "4.0.0",
     "@types/html-webpack-plugin": "3.2.0",
@@ -79,6 +81,7 @@
     "@types/log-update": "2.0.0",
     "@types/mini-css-extract-plugin": "0.2.0",
     "@types/minimatch": "3.0.3",
+    "@types/mkdirp": "0.5.2",
     "@types/mockery": "1.4.29",
     "@types/node": "~9.6.5",
     "@types/ora": "1.3.1",
@@ -121,6 +124,7 @@
     "extra-watch-webpack-plugin": "1.0.3",
     "file-loader": "2.0.0",
     "globby": "7.1.1",
+    "mkdirp": "0.5.1",
     "gzip-size": "4.1.0",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",

package.json

@@ -1,6 +1,5 @@
 import BuildTimeRender from '@dojo/webpack-contrib/build-time-render/BuildTimeRender';
 import ExternalLoaderPlugin from '@dojo/webpack-contrib/external-loader-plugin/ExternalLoaderPlugin';
-import BundleAnalyzerPlugin from '@dojo/webpack-contrib/webpack-bundle-analyzer/BundleAnalyzerPlugin';
 import ServiceWorkerPlugin, {
 	ServiceWorkerOptions
 } from '@dojo/webpack-contrib/service-worker-plugin/ServiceWorkerPlugin';
@@ -62,13 +61,6 @@ function webpackConfig(args: any): webpack.Configuration {
 	config.plugins = [
 		...plugins!,
 		assetsDirExists && new CopyWebpackPlugin([{ from: assetsDir, to: path.join(outputPath, 'assets') }]),
-		new BundleAnalyzerPlugin({
-			analyzerMode: 'static',
-			openAnalyzer: false,
-			generateStatsFile: true,
-			reportFilename: '../info/report.html',
-			statsFilename: '../info/stats.json'
-		}),
 		new HtmlWebpackPlugin({
 			base,
 			inject: true,

src/dist.config.ts

@@ -1,11 +1,11 @@
-import * as fs from 'fs';
 import * as path from 'path';
 import * as logUpdate from 'log-update';
 import * as logSymbols from 'log-symbols';
-import * as gzipSize from 'gzip-size';
 import * as typescript from 'typescript';
 import * as jsonFile from 'jsonfile';
+import BundleAnalyzer from './webpack-bundle-analyzer/BundleAnalyzer';
 import chalk from 'chalk';
+import { findLargestGroup } from './webpack-bundle-analyzer/parseUtils';
 
 const pkgDir = require('pkg-dir');
 const columns = require('cli-columns');
@@ -15,54 +15,64 @@ const version = jsonFile.readFileSync(path.join(pkgDir.sync(__dirname), 'package
 export default function logger(stats: any, config: any, runningMessage: string = '', args: any = {}): boolean {
 	const singleConfig = Array.isArray(config) ? config[0] : config;
 	const outputPath = singleConfig.output.path;
-	const manifestPath = path.join(outputPath, 'manifest.json');
-	let assets: undefined | string[];
+	const loggerStats = stats.toJson({ warningsFilter });
 	let chunks: undefined | string[];
-	if (fs.existsSync(manifestPath)) {
-		const manifestContent = JSON.parse(fs.readFileSync(path.join(outputPath, 'manifest.json'), 'utf8'));
-		assets = Object.keys(manifestContent).map((item) => {
-			const assetName = manifestContent[item];
-			const filePath = path.join(outputPath, assetName);
-			if (fs.existsSync(filePath)) {
-				if (args.mode === 'dev' || args.mode === 'test') {
-					return `${assetName}`;
-				} else {
-					const fileStats = fs.statSync(filePath);
-					const size = (fileStats.size / 1000).toFixed(2);
-					const assetInfo = `${assetName} ${chalk.yellow(`(${size}kb)`)}`;
-					const content = fs.readFileSync(filePath, 'utf8');
-					const compressedSize = (gzipSize.sync(content) / 1000).toFixed(2);
-					return `${assetInfo} / ${chalk.blue(`(${compressedSize}kb gz)`)}`;
-				}
-			}
-			return '';
-		});
 
-		chunks = (Array.isArray(config)
-			? stats.children.reduce((chunks: any[], current: any) => [...chunks, ...current.chunks], [])
-			: stats.chunks
-		).map((chunk: any) => `${chunk.names[0]}`);
+	let chunkMap: { [chunk: string]: any };
+	if (args.mode === 'dist') {
+		chunkMap = new BundleAnalyzer({
+			analyzerMode: 'static',
+			openAnalyzer: false,
+			generateStatsFile: true,
+			reportFilename: '../info/report.html',
+			statsFilename: '../info/stats.json'
+		}).analyze(stats, config);
 	}
+	chunks = (Array.isArray(config)
+		? loggerStats.children.reduce((chunks: any[], current: any) => [...chunks, ...current.chunks], [])
+		: loggerStats.chunks
+	).map((chunk: any) => {
+		const chunkName: string = chunk.names[0];
+		if (!chunkMap) {
+			return chunkName;
+		} else {
+			const chunkStats = chunkMap[chunkName];
+			const size = chunkStats && (chunkStats.parsedSize || chunkStats.statSize);
+			const gzipSize = chunkStats && chunkStats.gzipSize;
+
+			const chunkInfo = `${chunkName} ${chalk.yellow(`(${size}kb)`)}${
+				gzipSize ? `/ ${chalk.blue(`(${gzipSize}kb gz)`)}` : ''
+			}`;
+
+			if (size > 1000) {
+				const largestGroup = findLargestGroup(chunkStats, 'node_modules');
+				if (largestGroup) {
+					return `${chunkInfo}\nDependency: ${largestGroup.label} is ${largestGroup.statSize}kb`;
+				}
+			}
+			return chunkInfo;
+		}
+	});
 
 	let errors = '';
 	let warnings = '';
 	let chunkAndAssetLog = '';
 	let signOff = chalk.green('The build completed successfully.');
 
-	if (stats.warnings.length) {
+	if (loggerStats.warnings.length) {
 		signOff = chalk.yellow('The build completed with warnings.');
 		warnings = `
 ${chalk.yellow('warnings:')}${chalk.gray(
-			stats.warnings.reduce((warnings: string, warning: string) => `${warnings}\n${stripAnsi(warning)}`, '')
+			loggerStats.warnings.reduce((warnings: string, warning: string) => `${warnings}\n${stripAnsi(warning)}`, '')
 		)}
 `;
 	}
 
-	if (stats.errors.length) {
+	if (loggerStats.errors.length) {
 		signOff = chalk.red('The build completed with errors.');
 		errors = `
 ${chalk.yellow('errors:')}${chalk.red(
-			stats.errors.reduce((errors: string, error: string) => `${errors}\n${stripAnsi(error)}`, '')
+			loggerStats.errors.reduce((errors: string, error: string) => `${errors}\n${stripAnsi(error)}`, '')
 		)}
 `;
 	}
@@ -76,18 +86,12 @@ ${chalk.yellow('errors:')}${chalk.red(
 ${columns(chunks)}`;
 	}
 
-	if (assets) {
-		chunkAndAssetLog = `${chunkAndAssetLog}
-${chalk.yellow('assets:')}
-${columns(assets)}`;
-	}
-
 	logUpdate(`
 ${logSymbols.info} cli-build-app: ${version}
 ${logSymbols.info} typescript: ${typescript.version}
-${logSymbols.success} hash: ${stats.hash}
-${logSymbols.error} errors: ${stats.errors.length}
-${logSymbols.warning} warnings: ${stats.warnings.length}
+${logSymbols.success} hash: ${loggerStats.hash}
+${logSymbols.error} errors: ${loggerStats.errors.length}
+${logSymbols.warning} warnings: ${loggerStats.warnings.length}
 ${errors}${warnings}
 ${chunkAndAssetLog}
 ${chalk.yellow(`output at: ${chalk.cyan(chalk.underline(`file:///${outputPath}`))}`)}
@@ -96,3 +100,7 @@ ${signOff}
 	`);
 	return !!errors;
 }
+
+function warningsFilter(warning: string) {
+	return warning.includes('[mini-css-extract-plugin]\nConflicting order between');
+}

src/logger.ts

@@ -94,7 +94,7 @@ function build(config: webpack.Configuration, args: any) {
 			}
 			if (stats) {
 				const runningMessage = args.serve ? `Listening on port ${args.port}...` : '';
-				const hasErrors = logger(stats.toJson({ warningsFilter }), config, runningMessage, args);
+				const hasErrors = logger(stats, config, runningMessage, args);
 				if (hasErrors) {
 					reject({});
 					return;
@@ -139,7 +139,7 @@ async function fileWatch(config: webpack.Configuration, args: any) {
 							args.port
 					  }\nPlease note the serve option is not intended to be used to serve applications in production.`
 					: 'watching...';
-				logger(stats.toJson({ warningsFilter }), config, runningMessage, args);
+				logger(stats, config, runningMessage, args);
 			}
 			resolve(compiler);
 		});
@@ -281,10 +281,6 @@ async function serve(config: webpack.Configuration, args: any) {
 	});
 }
 
-function warningsFilter(warning: string) {
-	return warning.includes('[mini-css-extract-plugin]\nConflicting order between');
-}
-
 const command: Command = {
 	group: 'build',
 	name: 'app',

src/main.ts

@@ -0,0 +1,87 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as mkdir from 'mkdirp';
+import * as viewer from './viewer';
+const bfj = require('bfj');
+
+export interface BundleAnalyzerOptions {
+	reportFilename: string;
+	generateStatsFile: boolean;
+	statsFilename: string;
+	statsOptions: string | null;
+	analyzerMode: string;
+	openAnalyzer: boolean;
+	excludeBundles?: string;
+}
+
+export default class BundleAnalyzer {
+	private opts: BundleAnalyzerOptions;
+	private _outputDirectory!: string;
+	private _outputPath!: string;
+	private _webpackOutputPath!: string;
+
+	constructor(opts: Partial<BundleAnalyzerOptions>) {
+		this.opts = {
+			reportFilename: 'report.html',
+			generateStatsFile: false,
+			statsFilename: 'stats.json',
+			statsOptions: null,
+			analyzerMode: '',
+			openAnalyzer: false,
+			...opts
+		};
+	}
+
+	analyze(stats: any, config: any) {
+		const singleConfig = Array.isArray(config) ? config[0] : config;
+		this._webpackOutputPath = singleConfig.output.path;
+		this._outputPath = path.resolve(singleConfig.output.path, this.opts.statsFilename);
+		this._outputDirectory = path.dirname(this._outputPath);
+		stats = stats.toJson(this.opts.statsOptions);
+		stats = this.updateStatsHash(stats);
+		if (this.opts.generateStatsFile) {
+			this.generateStatsFile(stats);
+		}
+		return this.generateStaticReport(stats);
+	}
+
+	updateStatsHash(stats: any): any {
+		try {
+			const manifest = JSON.parse(fs.readFileSync(path.join(this._webpackOutputPath, 'manifest.json'), 'utf8'));
+			const originalManifest = JSON.parse(
+				fs.readFileSync(path.join(this._outputDirectory, 'manifest.original.json'), 'utf8')
+			);
+			let updatedStats = JSON.stringify(stats);
+			Object.keys(manifest).forEach((key) => {
+				if (originalManifest[key]) {
+					updatedStats = updatedStats.replace(new RegExp(originalManifest[key], 'g'), manifest[key]);
+				}
+			});
+			return JSON.parse(updatedStats);
+		} catch (e) {
+			return stats;
+		}
+	}
+
+	async generateStatsFile(stats: any) {
+		mkdir.sync(this._outputDirectory);
+
+		try {
+			await bfj.write(this._outputPath, stats, {
+				promises: 'ignore',
+				buffers: 'ignore',
+				maps: 'ignore',
+				iterables: 'ignore',
+				circular: 'ignore'
+			});
+		} catch {}
+	}
+
+	generateStaticReport(stats: any) {
+		return viewer.generateReportData(stats, {
+			reportFilename: path.resolve(this._webpackOutputPath, this.opts.reportFilename),
+			bundleDir: this._webpackOutputPath,
+			excludeBundle: this.opts.excludeBundles
+		});
+	}
+}