feat(@angular/cli): add build-optimizer support

Adds the new flag `--build-optimizer` (`--bo`), usable only with `--aot` (or `--prod` since it auto enables `--aot`).

This feature is experimental, and may not work correctly on your project. Should it work, total bundle size should go down. Savings are heavily dependent on the project.

See https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_optimizer for details about all the optimizations applied.

Usage: `ng build --prod --build-optimizer`. Disabling the vendor chunk has been shown to improve total savings, and is done automatically when `--bo` is specified unless `--vendor-chunk` has a value.

Please let us know if using `--build-optimizer` breaks your project so we can improve it further. Repos are very welcome.

Author: filipesilva

docs/documentation/build.md

@@ -332,3 +332,13 @@ Note: service worker support is experimental and subject to change.
     Show circular dependency warnings on builds.
   </p>
 </details>
+
+<details>
+  <summary>build-optimizer</summary>
+  <p>
+    <code>--build-optimizer</code> (aliases: <code>-bo</code>)
+  </p>
+  <p>
+    (Experimental) Enables @angular-devkit/build-optimizer optimizations when using `--aot`.
+  </p>
+</details>

package.json

@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
+    "@angular-devkit/build-optimizer": "0.0.3",
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
     "circular-dependency-plugin": "^3.0.0",

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

@@ -48,7 +48,6 @@ export const baseBuildCommandOptions: any = [
   {
     name: 'vendor-chunk',
     type: Boolean,
-    default: true,
     aliases: ['vc'],
     description: 'Use a separate bundle containing only vendor libraries.'
   },
@@ -159,6 +158,14 @@ export const baseBuildCommandOptions: any = [
     aliases: ['scd'],
     description: 'Show circular dependency warnings on builds.',
     default: buildConfigDefaults['showCircularDependencies']
+  },
+  {
+    name: 'build-optimizer',
+    type: Boolean,
+    default: false,
+    aliases: ['bo'],
+    description: '(Experimental) Enables @angular-devkit/build-optimizer '
+    + 'optimizations when using `--aot`.'
   }
 ];
 
@@ -185,6 +192,11 @@ const BuildCommand = Command.extend({
     // Check angular version.
     Version.assertAngularVersionIs2_3_1OrHigher(this.project.root);
 
+    // Default vendor chunk to false when build optimizer is on.
+    if (commandOptions.vendorChunk === undefined) {
+      commandOptions.vendorChunk = !commandOptions.buildOptimizer;
+    }
+
     const BuildTask = require('../tasks/build').default;
 
     const buildTask = new BuildTask({

packages/@angular/cli/commands/eject.ts

@@ -32,6 +32,12 @@ const EjectCommand = Command.extend({
   availableOptions: baseEjectCommandOptions,
 
   run: function (commandOptions: EjectTaskOptions) {
+
+    // Default vendor chunk to false when build optimizer is on.
+    if (commandOptions.vendorChunk === undefined) {
+      commandOptions.vendorChunk = !commandOptions.buildOptimizer;
+    }
+
     const EjectTask = require('../tasks/eject').default;
     const ejectTask = new EjectTask({
       project: this.project,

packages/@angular/cli/commands/serve.ts

@@ -121,6 +121,12 @@ const ServeCommand = Command.extend({
     const ServeTask = require('../tasks/serve').default;
 
     Version.assertAngularVersionIs2_3_1OrHigher(this.project.root);
+
+    // Default vendor chunk to false when build optimizer is on.
+    if (commandOptions.vendorChunk === undefined) {
+      commandOptions.vendorChunk = !commandOptions.buildOptimizer;
+    }
+
     return checkPort(commandOptions.port, commandOptions.host, defaultPort)
       .then(port => {
         commandOptions.port = port;

packages/@angular/cli/models/build-options.ts

@@ -22,4 +22,5 @@ export interface BuildOptions {
   preserveSymlinks?: boolean;
   extractLicenses?: boolean;
   showCircularDependencies?: boolean;
+  buildOptimizer?: boolean;
 }

packages/@angular/cli/models/webpack-config.ts

@@ -70,6 +70,11 @@ export class NgCliWebpackConfig {
     if (buildOptions.target !== 'development' && buildOptions.target !== 'production') {
       throw new Error("Invalid build target. Only 'development' and 'production' are available.");
     }
+
+    if (buildOptions.buildOptimizer
+      && !(buildOptions.aot || buildOptions.target === 'production')) {
+      throw new Error('The `--build-optimizer` option cannot be used without `--aot`.');
+    }
   }
 
   // Fill in defaults for build targets

packages/@angular/cli/models/webpack-configs/common.ts

@@ -19,6 +19,7 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
  * require('json-loader')
  * require('url-loader')
  * require('file-loader')
+ * require('@angular-devkit/build-optimizer')
  */
 
 export function getCommonConfig(wco: WebpackConfigOptions) {
@@ -71,6 +72,16 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     }));
   }
 
+  if (buildOptions.buildOptimizer) {
+    extraRules.push({
+      test: /\.js$/,
+      use: [{
+        loader: '@angular-devkit/build-optimizer/webpack-loader',
+        options: { sourceMap: buildOptions.sourcemaps }
+      }]
+    });
+  }
+
   return {
     resolve: {
       extensions: ['.ts', '.js'],
@@ -107,7 +118,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     node: {
       fs: 'empty',
       // `global` should be kept true, removing it resulted in a
-      // massive size increase with NGO on AIO.
+      // massive size increase with Build Optimizer on AIO.
       global: true,
       crypto: 'empty',
       tls: 'empty',

packages/@angular/cli/models/webpack-configs/production.ts

@@ -3,6 +3,7 @@ import * as webpack from 'webpack';
 import * as fs from 'fs';
 import * as semver from 'semver';
 import { stripIndent } from 'common-tags';
+import { PurifyPlugin } from '@angular-devkit/build-optimizer';
 import { StaticAssetPlugin } from '../../plugins/static-asset';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
 import { WebpackConfigOptions } from '../webpack-config';
@@ -91,20 +92,28 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
     }));
   }
 
+  const uglifyCompressOptions: any = { screw_ie8: true, warnings: buildOptions.verbose };
+
+  if (buildOptions.buildOptimizer) {
+    // This plugin must be before webpack.optimize.UglifyJsPlugin.
+    extraPlugins.push(new PurifyPlugin());
+    uglifyCompressOptions.pure_getters = true;
+  }
+
   return {
     entry: entryPoints,
-    plugins: [
+    plugins: extraPlugins.concat([
       new webpack.EnvironmentPlugin({
         'NODE_ENV': 'production'
       }),
       new webpack.HashedModuleIdsPlugin(),
       new webpack.optimize.ModuleConcatenationPlugin(),
       new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8: true },
-        compress: { screw_ie8: true, warnings: buildOptions.verbose },
+        compress: uglifyCompressOptions,
         sourceMap: buildOptions.sourcemaps,
         comments: false
       })
-    ].concat(extraPlugins)
+    ])
   };
 };

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -74,7 +74,6 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
     }, options));
 }
 
-
 export const getNonAotConfig = function(wco: WebpackConfigOptions) {
   const { appConfig, projectRoot } = wco;
   const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
@@ -86,7 +85,7 @@ export const getNonAotConfig = function(wco: WebpackConfigOptions) {
 };
 
 export const getAotConfig = function(wco: WebpackConfigOptions) {
-  const { projectRoot, appConfig } = wco;
+  const { projectRoot, buildOptions, appConfig } = wco;
   const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
   const testTsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.testTsconfig);
 
@@ -99,8 +98,16 @@ export const getAotConfig = function(wco: WebpackConfigOptions) {
     pluginOptions.exclude = exclude;
   }
 
+  let boLoader: any = [];
+  if (buildOptions.buildOptimizer) {
+    boLoader = [{
+      loader: '@angular-devkit/build-optimizer/webpack-loader',
+      options: { sourceMap: buildOptions.sourcemaps }
+    }];
+  }
+
   return {
-    module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
+    module: { rules: [{ test: /\.ts$/, use: [...boLoader, webpackLoader] }] },
     plugins: [ _createAotPlugin(wco, pluginOptions) ]
   };
 };