feat(@angular-devkit/build-optimizer): add BuildOptimizerWebpackPlugin

Using this webpack allows determining in advance if files from a package should be skipped by the Build Optimizer loader.

Author: filipesilva

etc/api/angular_devkit/build_optimizer/src/_golden-api.d.ts

@@ -1,5 +1,11 @@
 export declare function buildOptimizer(options: BuildOptimizerOptions): TransformJavascriptOutput;
 
+export declare const buildOptimizerLoaderPath: string;
+
+export declare class BuildOptimizerWebpackPlugin {
+    apply(compiler: Compiler): void;
+}
+
 export default function buildOptimizerLoader(this: webpack.loader.LoaderContext, content: string, previousSourceMap: RawSourceMap): void;
 
 export declare function getFoldFileTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;

packages/angular_devkit/build_optimizer/README.md

@@ -186,7 +186,12 @@ export interface BuildOptimizerOptions {
 ## Webpack loader usage:
 
 ```typescript
+import { BuildOptimizerWebpackPlugin } from '@angular-devkit/build-optimizer';
+
 module.exports = {
+  plugins: [
+    new BuildOptimizerWebpackPlugin(),
+  ]
   module: {
     rules: [
       {

packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-loader.ts

@@ -17,9 +17,31 @@ interface BuildOptimizerLoaderOptions {
   sourceMap: boolean;
 }
 
+const alwaysProcess = (path: string) =>
+  // Always process TS files.
+  path.endsWith('.ts') || path.endsWith('.tsx')
+  // Always process factory files.
+  || path.endsWith('.ngfactory.js') || path.endsWith('.ngstyle.js');
+
 export default function buildOptimizerLoader
   (this: webpack.loader.LoaderContext, content: string, previousSourceMap: RawSourceMap) {
   this.cacheable();
+
+  const skipBuildOptimizer = this._module
+    && this._module.factoryMeta
+    && this._module.factoryMeta.skipBuildOptimizer;
+
+  if (!alwaysProcess(this.resourcePath) && skipBuildOptimizer) {
+    // Skip loading processing this file with Build Optimizer if we determined in
+    // BuildOptimizerWebpackPlugin that we shouldn't.
+
+    // Webpack typings for previousSourceMap are wrong, they are JSON objects and not strings.
+    // tslint:disable-next-line:no-any
+    this.callback(null, content, previousSourceMap as any);
+
+    return;
+  }
+
   const options: BuildOptimizerLoaderOptions = loaderUtils.getOptions(this) || {};
 
   // Make up names of the intermediate files so we can chain the sourcemaps.
@@ -33,12 +55,11 @@ export default function buildOptimizerLoader
     outputFilePath,
     emitSourceMap: options.sourceMap,
     isSideEffectFree: this._module
-                      && this._module.factoryMeta
-                      && this._module.factoryMeta.sideEffectFree,
+      && this._module.factoryMeta
+      && this._module.factoryMeta.sideEffectFree,
   });
 
   if (boOutput.emitSkipped || boOutput.content === null) {
-    // Webpack typings for previousSourceMap are wrong, they are JSON objects and not strings.
     // tslint:disable-next-line:no-any
     this.callback(null, content, previousSourceMap as any);
 

packages/angular_devkit/build_optimizer/src/build-optimizer/webpack-plugin.ts

@@ -0,0 +1,33 @@
+
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Compiler } from 'webpack';  // tslint:disable-line:no-implicit-dependencies
+
+export class BuildOptimizerWebpackPlugin {
+  apply(compiler: Compiler) {
+    compiler.hooks.normalModuleFactory.tap("BuildOptimizerWebpackPlugin", nmf => {
+      nmf.hooks.module.tap("BuildOptimizerWebpackPlugin", (module, data) => {
+        const resolveData = data.resourceResolveData;
+        if (resolveData && resolveData.descriptionFileData) {
+          // Only TS packages should use Build Optimizer.
+          const typings = resolveData.descriptionFileData.typings;
+          // Notes:
+          // - a TS package might not have defined typings but still use .d.ts files next to their
+          // .js files. We don't cover that case because the Angular Package Format (APF) calls for
+          // using the Typings field and Build Optimizer is geared towards APF. Maybe we could
+          // provide configuration options to the plugin to cover that case if there's demand.
+          // - a JS-only package that also happens to provides typings will also be flagged by this
+          // check. Not sure there's a good way to skip those.
+          module.factoryMeta.skipBuildOptimizer = !typings;
+        }
+
+        return module;
+      });
+    });
+  }
+}

packages/angular_devkit/build_optimizer/src/index.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export { default as buildOptimizerLoader } from './build-optimizer/webpack-loader';
+export { BuildOptimizerWebpackPlugin } from './build-optimizer/webpack-plugin';
 export { buildOptimizer } from './build-optimizer/build-optimizer';
 
 export { transformJavascript } from './helpers/transform-javascript';