feat(@angular-devkit/build-angular): fine grain settings for optimiza…

…tion

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -16,9 +16,10 @@ import {
   CurrentFileReplacement,
   ExtraEntryPoint,
 } from '../../browser/schema';
+import { NormalizedOptimization } from '../../utils/index';
 
 export interface BuildOptions {
-  optimization: boolean;
+  optimization: NormalizedOptimization;
   environment?: string;
   outputPath: string;
   resourcesOutputPath?: string;

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts

@@ -20,8 +20,12 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
   const extraPlugins = [];
 
   let isEval = false;
+  const { styles: stylesOptimization, scripts: scriptsOptimization } = buildOptions.optimization;
   // See https://webpack.js.org/configuration/devtool/ for sourcemap types.
-  if (buildOptions.sourceMap && buildOptions.evalSourceMap && !buildOptions.optimization) {
+  if (buildOptions.sourceMap &&
+    buildOptions.evalSourceMap &&
+    !stylesOptimization &&
+    !scriptsOptimization) {
     // Produce eval sourcemaps for development with serve, which are faster.
     isEval = true;
   }

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -33,6 +33,7 @@ export const buildOptimizerLoader: string = g['_DevKitIsLocal']
 // tslint:disable-next-line:no-big-function
 export function getCommonConfig(wco: WebpackConfigOptions) {
   const { root, projectRoot, buildOptions } = wco;
+  const { styles: stylesOptimization, scripts: scriptsOptimization } = buildOptions.optimization;
 
   const nodeModules = findUp('node_modules', projectRoot);
   if (!nodeModules) {
@@ -204,37 +205,61 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     alias = rxPaths(nodeModules);
   } catch { }
 
-  const terserOptions = {
-    ecma: wco.supportES2015 ? 6 : 5,
-    warnings: !!buildOptions.verbose,
-    safari10: true,
-    output: {
-      ascii_only: true,
-      comments: false,
-      webkit: true,
-    },
+  const extraMinimizers = [];
+  if (stylesOptimization) {
+    extraMinimizers.push(
+      new CleanCssWebpackPlugin({
+        sourceMap: buildOptions.stylesSourceMap,
+        // component styles retain their original file name
+        test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
+      }),
+    );
+  }
 
-    // On server, we don't want to compress anything. We still set the ngDevMode = false for it
-    // to remove dev code.
-    compress: (buildOptions.platform == 'server' ? {
-      global_defs: {
-        ngDevMode: false,
-      },
-    } : {
-      pure_getters: buildOptions.buildOptimizer,
-      // PURE comments work best with 3 passes.
-      // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
-      passes: buildOptions.buildOptimizer ? 3 : 1,
-      global_defs: {
-        ngDevMode: false,
+  if (scriptsOptimization) {
+    const terserOptions = {
+      ecma: wco.supportES2015 ? 6 : 5,
+      warnings: !!buildOptions.verbose,
+      safari10: true,
+      output: {
+        ascii_only: true,
+        comments: false,
+        webkit: true,
       },
-    }),
-    // We also want to avoid mangling on server.
-    ...(buildOptions.platform == 'server' ? { mangle: false } : {}),
-  };
+
+      // On server, we don't want to compress anything. We still set the ngDevMode = false for it
+      // to remove dev code.
+      compress: (buildOptions.platform == 'server' ? {
+        global_defs: {
+          ngDevMode: false,
+        },
+      } : {
+          pure_getters: buildOptions.buildOptimizer,
+          // PURE comments work best with 3 passes.
+          // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
+          passes: buildOptions.buildOptimizer ? 3 : 1,
+          global_defs: {
+            ngDevMode: false,
+          },
+        }),
+      // We also want to avoid mangling on server.
+      ...(buildOptions.platform == 'server' ? { mangle: false } : {}),
+    };
+
+    extraMinimizers.push(
+      new TerserPlugin({
+        sourceMap: buildOptions.scriptsSourceMap,
+        parallel: true,
+        cache: true,
+        terserOptions,
+      }),
+    );
+  }
 
   return {
-    mode: buildOptions.optimization ? 'production' : 'development',
+    mode: scriptsOptimization || stylesOptimization
+      ? 'production'
+      : 'development',
     devtool: false,
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js'],
@@ -296,17 +321,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
         new HashedModuleIdsPlugin(),
         // TODO: check with Mike what this feature needs.
         new BundleBudgetPlugin({ budgets: buildOptions.budgets }),
-        new CleanCssWebpackPlugin({
-          sourceMap: buildOptions.stylesSourceMap,
-          // component styles retain their original file name
-          test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
-        }),
-        new TerserPlugin({
-          sourceMap: buildOptions.scriptsSourceMap,
-          parallel: true,
-          cache: true,
-          terserOptions,
-        }),
+        ...extraMinimizers,
       ],
     },
     plugins: extraPlugins,

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -35,10 +35,12 @@ import {
   statsWarningsToString,
 } from '../angular-cli-files/utilities/stats';
 import {
+  NormalizedOptimization,
   NormalizedSourceMaps,
   defaultProgress,
   normalizeAssetPatterns,
   normalizeFileReplacements,
+  normalizeOptimization,
   normalizeSourceMaps,
 } from '../utils';
 import {
@@ -56,10 +58,14 @@ const webpackMerge = require('webpack-merge');
 // BrowserBuildSchema and BrowserBuilder.buildWebpackConfig.
 // It would really help if it happens during architect.validateBuilderOptions, or similar.
 export interface NormalizedBrowserBuilderSchema extends
-  Pick<BrowserBuilderSchema, Exclude<keyof BrowserBuilderSchema, 'sourceMap' | 'vendorSourceMap'>>,
+  Pick<
+  BrowserBuilderSchema,
+  Exclude<keyof BrowserBuilderSchema, 'sourceMap' | 'vendorSourceMap' | 'optimization'>
+  >,
   NormalizedSourceMaps {
   assets: AssetPatternObject[];
   fileReplacements: CurrentFileReplacement[];
+  optimization: NormalizedOptimization;
 }
 
 export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
@@ -92,13 +98,18 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
         options = {
           ...options,
           ...normalizedOptions,
+          // tslint:disable-next-line:no-any
+          optimization: normalizeOptimization(options.optimization) as any,
         };
       }),
       concatMap(() => {
         let webpackConfig;
         try {
           webpackConfig = this.buildWebpackConfig(root, projectRoot, host,
-            options as NormalizedBrowserBuilderSchema);
+            // todo replace with unknown
+            // we need to find a clear way to create this options
+            // tslint:disable-next-line:no-any
+            options as any as NormalizedBrowserBuilderSchema);
         } catch (e) {
           return throwError(e);
         }

packages/angular_devkit/build_angular/src/browser/schema.d.ts

@@ -44,7 +44,7 @@ export interface BrowserBuilderSchema {
   /**
    * Enables optimization of the build output.
    */
-  optimization: boolean;
+  optimization: OptimizationOptions;
 
   /**
    * Replace files with other files in the build.
@@ -237,6 +237,15 @@ export interface BrowserBuilderSchema {
   profile: boolean;
 }
 
+export type OptimizationOptions = boolean | OptimizationObject;
+
+export interface OptimizationObject {
+  /** Enables optimization of the scripts output. */
+  scripts?: boolean;
+  /** Enables optimization of the styles output. */
+  styles?: boolean;
+}
+
 export type SourceMapOptions = boolean | SourceMapObject;
 
 export interface SourceMapObject {

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -55,9 +55,29 @@
       "additionalProperties": false
     },
     "optimization": {
-      "type": "boolean",
-      "description": "When true, uses optimization for the app build.",
-      "default": false
+      "description": "Enables optimization of the build output.",
+      "default": false,
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "scripts": {
+              "type": "boolean",
+              "description": "Enables optimization of the scripts output.",
+              "default": true
+            },
+            "styles": {
+              "type": "boolean",
+              "description": "Enables optimization of the styles output.",
+              "default": true
+            }
+          },
+          "additionalProperties": false
+        },
+        {
+          "type": "boolean"
+        }
+      ]
     },
     "fileReplacements": {
       "description": "Replace files with other files in the build.",

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -24,7 +24,12 @@ import * as WebpackDevServer from 'webpack-dev-server';
 import { checkPort } from '../angular-cli-files/utilities/check-port';
 import { BrowserBuilder, NormalizedBrowserBuilderSchema, getBrowserLoggingCb } from '../browser/';
 import { BrowserBuilderSchema } from '../browser/schema';
-import { normalizeAssetPatterns, normalizeFileReplacements, normalizeSourceMaps } from '../utils';
+import {
+  normalizeAssetPatterns,
+  normalizeFileReplacements,
+  normalizeOptimization,
+  normalizeSourceMaps,
+} from '../utils';
 const opn = require('opn');
 
 
@@ -86,15 +91,26 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
         browserOptions = {
           ...browserOptions,
           ...normalizedOptions,
+          // tslint:disable-next-line:no-any
+          optimization: normalizeOptimization(options.optimization) as any,
         };
       }),
       concatMap(() => {
         const webpackConfig = this.buildWebpackConfig(
-          root, projectRoot, host, browserOptions as NormalizedBrowserBuilderSchema);
+          // todo should be unknown
+          // tslint:disable-next-line:no-any
+          root, projectRoot, host, browserOptions as any as NormalizedBrowserBuilderSchema,
+        );
 
         let webpackDevServerConfig: WebpackDevServer.Configuration;
         try {
-          webpackDevServerConfig = this._buildServerConfig(root, options, browserOptions);
+          webpackDevServerConfig = this._buildServerConfig(
+            root,
+            options,
+            // todo should be unknown
+            // tslint:disable-next-line:no-any
+            browserOptions as any as NormalizedBrowserBuilderSchema,
+          );
         } catch (err) {
           return throwError(err);
         }
@@ -179,19 +195,19 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
     root: Path,
     projectRoot: Path,
     host: virtualFs.Host<Stats>,
-    browserOptions: BrowserBuilderSchema,
+    browserOptions: NormalizedBrowserBuilderSchema,
   ) {
     const browserBuilder = new BrowserBuilder(this.context);
     const webpackConfig = browserBuilder.buildWebpackConfig(
-      root, projectRoot, host, browserOptions as NormalizedBrowserBuilderSchema);
+      root, projectRoot, host, browserOptions);
 
     return webpackConfig;
   }
 
   private _buildServerConfig(
     root: Path,
     options: DevServerBuilderOptions,
-    browserOptions: BrowserBuilderSchema,
+    browserOptions: NormalizedBrowserBuilderSchema,
   ) {
     const systemRoot = getSystemPath(root);
     if (options.disableHostCheck) {
@@ -203,6 +219,7 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
     }
 
     const servePath = this._buildServePath(options, browserOptions);
+    const { styles, scripts } = browserOptions.optimization;
 
     const config: WebpackDevServer.Configuration = {
       host: options.host,
@@ -214,13 +231,13 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
       } as WebpackDevServer.HistoryApiFallbackConfig,
       stats: false,
-      compress: browserOptions.optimization,
+      compress: styles || scripts,
       watchOptions: {
         poll: browserOptions.poll,
       },
       https: options.ssl,
       overlay: {
-        errors: !browserOptions.optimization,
+        errors: !(styles || scripts),
         warnings: false,
       },
       public: options.publicHost,
@@ -332,7 +349,10 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
     config.proxy = proxyConfig;
   }
 
-  private _buildServePath(options: DevServerBuilderOptions, browserOptions: BrowserBuilderSchema) {
+  private _buildServePath(
+    options: DevServerBuilderOptions,
+    browserOptions: NormalizedBrowserBuilderSchema,
+  ) {
     let servePath = options.servePath;
     if (!servePath && servePath !== '') {
       const defaultServePath =

packages/angular_devkit/build_angular/src/dev-server/schema.json

@@ -84,8 +84,29 @@
       "default": true
     },
     "optimization": {
-      "type": "boolean",
-      "description": "Enables optimization of the build output."
+      "description": "Enables optimization of the build output.",
+      "default": false,
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "scripts": {
+              "type": "boolean",
+              "description": "Enables optimization of the scripts output.",
+              "default": true
+            },
+            "styles": {
+              "type": "boolean",
+              "description": "Enables optimization of the styles output.",
+              "default": true
+            }
+          },
+          "additionalProperties": false
+        },
+        {
+          "type": "boolean"
+        }
+      ]
     },
     "aot": {
       "type": "boolean",