feat(@angular/cli): Allow ability to set budget sizes for your bundles

packages/@angular/cli/lib/config/schema.json

@@ -192,6 +192,27 @@
             "description": "Name and corresponding file for environment config.",
             "type": "object",
             "additionalProperties": true
+          },
+          "budgets": {
+            "description": "Defines the budget allotments for bundles.",
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "budget": {
+                  "type": "number"
+                },
+                "type": {
+                  "type": "string"
+                },
+                "unit": {
+                  "type": "string"
+                },
+                "severity": {
+                  "type": "string"
+                }
+              }
+            }
           }
         },
         "additionalProperties": false

packages/@angular/cli/tasks/build.ts

@@ -1,13 +1,20 @@
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as webpack from 'webpack';
+import { red, yellow } from 'chalk';
 
 import { getAppFromConfig } from '../utilities/app-utils';
 import { BuildTaskOptions } from '../commands/build';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { getWebpackStatsConfig } from '../models/webpack-configs/utils';
 import { CliConfig } from '../models/config';
-import { statsToString, statsWarningsToString, statsErrorsToString } from '../utilities/stats';
+import {
+  statsToString,
+  statsWarningsToString,
+  statsErrorsToString,
+  evaluateBudgets,
+  BudgetResult
+} from '../utilities/stats';
 
 const Task = require('../ember-cli/lib/models/task');
 const SilentError = require('silent-error');
@@ -17,9 +24,9 @@ export default Task.extend({
   run: function (runTaskOptions: BuildTaskOptions) {
     const config = CliConfig.fromProject().config;
 
-    const app = getAppFromConfig(runTaskOptions.app);
+    const appConfig = getAppFromConfig(runTaskOptions.app);
 
-    const outputPath = runTaskOptions.outputPath || app.outDir;
+    const outputPath = runTaskOptions.outputPath || appConfig.outDir;
     if (this.project.root === path.resolve(outputPath)) {
       throw new SilentError('Output path MUST not be project root directory!');
     }
@@ -30,7 +37,7 @@ export default Task.extend({
       fs.removeSync(path.resolve(this.project.root, outputPath));
     }
 
-    const webpackConfig = new NgCliWebpackConfig(runTaskOptions, app).buildConfig();
+    const webpackConfig = new NgCliWebpackConfig(runTaskOptions, appConfig).buildConfig();
     const webpackCompiler = webpack(webpackConfig);
     const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);
 
@@ -41,10 +48,30 @@ export default Task.extend({
         }
 
         const json = stats.toJson('verbose');
+
+        let budgetResults: BudgetResult[];
+        if (runTaskOptions.target === 'production' && !!appConfig.budgets) {
+          budgetResults = evaluateBudgets(json, appConfig.budgets);
+        }
+
         if (runTaskOptions.verbose) {
           this.ui.writeLine(stats.toString(statsConfig));
         } else {
-          this.ui.writeLine(statsToString(json, statsConfig));
+          const bundleBudgetResults = budgetResults.filter(br => br.type === 'bundle');
+          this.ui.writeLine(statsToString(json, statsConfig, bundleBudgetResults));
+        }
+
+
+        const initialBudgetResults = budgetResults.filter(br => br.type === 'initial');
+        if (initialBudgetResults.length > 0) {
+          const prefix = initialBudgetResults.every(b => b.result === 'Warning')
+            ? 'Warning' : 'Error';
+          const color = prefix === 'Warning' ? yellow : red;
+          this.ui.writeLine(color(`${prefix}: Initial budget size exceeded.`));
+        }
+
+        if (budgetResults.filter(br => br.result === 'Error').length > 0) {
+          reject('Bundle budget exceeded');
         }
 
         if (stats.hasWarnings()) {

packages/@angular/cli/utilities/stats.ts

@@ -2,19 +2,35 @@ import { bold, green, red, reset, white, yellow } from 'chalk';
 import { stripIndents } from 'common-tags';
 
 
+export type BudgetType = 'bundle' | 'initial';
+
+export interface Budget {
+  type: BudgetType;
+  budget: number;
+  unit: SizeUnit;
+  severity: 'Warning' | 'Error';
+}
+
+export type SizeUnit = 'bytes' | 'kB' | 'MB' | 'GB';
+
+const sizeUnits = ['bytes', 'kB', 'MB', 'GB'];
+
 function _formatSize(size: number): string {
   if (size <= 0) {
     return '0 bytes';
   }
 
-  const abbreviations = ['bytes', 'kB', 'MB', 'GB'];
   const index = Math.floor(Math.log(size) / Math.log(1000));
 
-  return `${+(size / Math.pow(1000, index)).toPrecision(3)} ${abbreviations[index]}`;
+  return `${+(size / Math.pow(1000, index)).toPrecision(3)} ${sizeUnits[index]}`;
 }
 
+function _getSize(size: number, unit: SizeUnit): number {
+  const unitMultiplier = sizeUnits.indexOf(unit);
+  return size / Math.pow(1000, unitMultiplier);
+}
 
-export function statsToString(json: any, statsConfig: any) {
+export function statsToString(json: any, statsConfig: any, budgetResults: BudgetResult[] = []) {
   const colors = statsConfig.colors;
   const rs = (x: string) => colors ? reset(x) : x;
   const w = (x: string) => colors ? bold(white(x)) : x;
@@ -36,7 +52,22 @@ export function statsToString(json: any, statsConfig: any) {
         .map(f => f && chunk[f] ? g(` [${f}]`) : '')
         .join('');
 
-      return `chunk {${y(chunk.id)}} ${g(files)}${names}${size}${parents} ${initial}${flags}`;
+      let msg = `chunk {${y(chunk.id)}} ${g(files)}${names}${size}${parents} ${initial}${flags}`;
+
+      const chunkWarnings = budgetResults
+        .filter(bbr => bbr.id === chunk.id && bbr.result === 'Warning');
+      const chunkErrors = budgetResults
+        .filter(bbr => bbr.id === chunk.id && bbr.result === 'Error');
+
+      const chunkBudgetResults = chunkErrors.length > 0 ? chunkErrors : chunkWarnings;
+
+      chunkBudgetResults.forEach(bbr => {
+          const color = bbr.result === 'Warning' ? yellow : red;
+          const budgetMessage = `Bundle budget size exceeded (${bbr.budget} ${bbr.unit})`;
+          msg += `\n${color(budgetMessage)}`;
+        });
+
+      return msg;
     }).join('\n')}
     `);
 }
@@ -56,3 +87,54 @@ export function statsErrorsToString(json: any, statsConfig: any) {
 
   return rs('\n' + json.errors.map((error: any) => r(`ERROR in ${error}`)).join('\n'));
 }
+
+export interface BudgetResult {
+  result: 'Error' | 'Warning';
+  type: BudgetType;
+  budget: number;
+  unit: SizeUnit;
+  id?: number;
+}
+
+export function evaluateBudgets(stats: any, budgets: Budget[]): BudgetResult[] {
+  const results: BudgetResult[] = [];
+
+  const bundleBudgets = budgets.filter(b => b.type === 'bundle');
+  let initialSize = 0;
+
+  stats.chunks.forEach((chunk: any) => {
+    const asset = stats.assets.filter((x: any) => x.name == chunk.files[0])[0];
+    const chunkSize = asset.size;
+
+    initialSize += chunk.initial ? chunkSize : 0;
+
+    if (!chunk.initial) {
+      bundleBudgets.forEach(budget => {
+        const chunkSizeInUnit = _getSize(chunkSize, budget.unit);
+        if (chunkSizeInUnit > budget.budget) {
+          results.push({
+            id: chunk.id,
+            type: 'bundle',
+            result: budget.severity,
+            budget: budget.budget,
+            unit: budget.unit
+          });
+        }
+      });
+    }
+  });
+
+  budgets.filter(b => b.type === 'initial').forEach(budget => {
+    const initialSizeInUnit = _getSize(initialSize, budget.unit);
+    if (initialSizeInUnit > budget.budget) {
+      results.push({
+        type: 'initial',
+        result: budget.severity,
+        budget: budget.budget,
+        unit: budget.unit
+      });
+    }
+  });
+
+  return results;
+}

tests/e2e/tests/build/budgets.ts

@@ -0,0 +1,28 @@
+import {ng} from '../../utils/process';
+import {updateJsonFile} from '../../utils/project';
+import {expectToFail} from '../../utils/utils';
+
+
+export default function() {
+  return Promise.resolve()
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['budgets'] = [{
+        type: 'initial',
+        budget: 1,
+        unit: 'kB',
+        severity: 'Warning'
+      }];
+    }))
+    .then(() => ng('build', '--prod'))
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['budgets'] = [{
+        type: 'initial',
+        budget: 1,
+        unit: 'kB',
+        severity: 'Error'
+      }];
+    }))
+    .then(() => expectToFail(() => ng('build', '--prod')));
+}