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

Closes #7139

Author: Brocco

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

@@ -192,6 +192,22 @@
             "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": {
+                "name": {
+                  "description": "Name of the bundle.",
+                  "type": "string"
+                },
+                "budget": {
+                  "description": "Threshold to measure against. (in kb)",
+                  "type": "number"
+                }
+              }
+            }
           }
         },
         "additionalProperties": false

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

@@ -1,6 +1,7 @@
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as webpack from 'webpack';
+import { red } from 'chalk';
 
 import { getAppFromConfig } from '../utilities/app-utils';
 import { BuildTaskOptions } from '../commands/build';
@@ -17,9 +18,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 +31,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);
 
@@ -47,6 +48,24 @@ export default Task.extend({
           this.ui.writeLine(statsToString(json, statsConfig));
         }
 
+        if (runTaskOptions.target === 'production' && !!appConfig.budgets) {
+          let budgetErrors: string[] = [];
+          appConfig.budgets.forEach((budget: {name: string; budget: number}) => {
+            const chunk = json.chunks.filter((c: {names: string[];}) => c.names.indexOf(budget.name) !== -1)[0];
+            const asset = json.assets.filter((x: any) => x.name == chunk.files[0])[0];
+            const size = asset.size / 1000;
+            if (size > budget.budget) {
+              budgetErrors.push(`${budget.name} budget: ${budget.budget} kB size: ${size.toPrecision(3)} kB`);
+            }
+          });
+          if (budgetErrors.length > 0) {
+            const budgetError = 'Allowed bundle budgets have been exceeded';
+            this.ui.writeLine(red(`\n...${budgetError}`))
+            budgetErrors.forEach(err => this.ui.writeLine(red(`  ${err}`)));
+            reject(budgetError);
+          }
+        }
+
         if (stats.hasWarnings()) {
           this.ui.writeLine(statsWarningsToString(json, statsConfig));
         }

tests/e2e/tests/build/budgets.ts

@@ -0,0 +1,22 @@
+import {ng} from '../../utils/process';
+import {updateJsonFile} from '../../utils/project';
+import {expectToFail} from '../../utils/utils';
+
+
+export default function() {
+  // Skip this in ejected tests.
+
+  // Can't use the `ng` helper because somewhere the environment gets
+  // stuck to the first build done
+  return Promise.resolve()
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['budgets'] = [{ name: 'main', budget: 100000 }]
+    }))
+    .then(() => ng('build', '--prod'))
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['budgets'] = [{ name: 'main', budget: 0 }]
+    }))
+    .then(() => expectToFail(() => ng('build', '--prod')));
+}