feat: minify UMD bundles (#205)

Author: DavidParks8

integration/samples/secondary/specs/assets.ts

@@ -19,6 +19,22 @@ describe(`@sample/secondary`, () => {
     });
   });
 
+  describe(`secondary-lib.umd.min.js`, () => {
+    let GENERATED;
+    before(done => {
+      GENERATED = require(path.resolve(__dirname, '..', 'dist', 'bundles', 'secondary-lib.umd.min.js'));
+      done();
+    });
+
+    it(`should exist`, () => {
+      expect(GENERATED).to.be.ok;
+    });
+
+    it(`should have "BazComponent"`, () => {
+      expect(GENERATED.BazComponent).to.be.ok;
+    });
+  });
+
   describe(`secondary-lib-sub-module.umd.js`, () => {
     let GENERATED;
     before(done => {
@@ -35,4 +51,20 @@ describe(`@sample/secondary`, () => {
     });
   });
 
+  describe(`secondary-lib-sub-module.umd.min.js`, () => {
+    let GENERATED;
+    before(done => {
+      GENERATED = require(path.resolve(__dirname, '..', 'dist', 'bundles', 'secondary-lib-sub-module.umd.min.js'));
+      done();
+    });
+
+    it(`should exist`, () => {
+      expect(GENERATED).to.be.ok;
+    });
+
+    it(`should have "BarComponent"`, () => {
+      expect(GENERATED.BarComponent).to.be.ok;
+    });
+  });
+
 });

src/lib/bundler.ts

@@ -4,7 +4,8 @@ import { NgArtifactsFactory } from './model/ng-artifacts-factory';
 import { writePackage } from './steps/package';
 import { processAssets } from './steps/assets';
 import { ngc } from './steps/ngc';
-import { remapSourcemap, relocateSourcemapRoot } from './steps/sorcery';
+import { minifyJsFile } from './steps/uglify';
+import { remapSourceMap, relocateSourceMapRoot } from './steps/sorcery';
 import { rollup } from './steps/rollup';
 import { downlevelWithTsc } from './steps/tsc';
 import { copySourceFilesToDestination } from './steps/transfer';
@@ -32,7 +33,7 @@ export async function generateNgBundle(ngPkg: NgPackageData): Promise<void> {
   // 2. NGC
   const es2015EntryFile: string = await ngc(ngPkg, baseBuildPath);
   // XX: see #46 - ngc only references to closure-annotated ES6 sources
-  await remapSourcemap(`${baseBuildPath}/${ngPkg.flatModuleFileName}.js`);
+  await remapSourceMap(`${baseBuildPath}/${ngPkg.flatModuleFileName}.js`);
 
   // 3. FESM15: ROLLUP
   await rollup({
@@ -42,13 +43,13 @@ export async function generateNgBundle(ngPkg: NgPackageData): Promise<void> {
     dest: artifactPaths.es2015,
     externals: ngPkg.libExternals
   });
-  await remapSourcemap(artifactPaths.es2015);
+  await remapSourceMap(artifactPaths.es2015);
 
   // 4. FESM5: TSC
   await downlevelWithTsc(
     artifactPaths.es2015,
     artifactPaths.module);
-  await remapSourcemap(artifactPaths.module);
+  await remapSourceMap(artifactPaths.module);
 
   // 5. UMD: ROLLUP
   await rollup({
@@ -58,15 +59,19 @@ export async function generateNgBundle(ngPkg: NgPackageData): Promise<void> {
     dest: artifactPaths.main,
     externals: ngPkg.libExternals
   });
-  await remapSourcemap(artifactPaths.main);
+  await remapSourceMap(artifactPaths.main);
 
-  // 6. SOURCEMAPS: RELOCATE ROOT PATHS
-  await relocateSourcemapRoot(ngPkg);
+  // 6. UMD: Minify
+  const minifiedFilePath: string = await minifyJsFile(artifactPaths.main);
+  await remapSourceMap(minifiedFilePath);
 
-  // 7. COPY SOURCE FILES TO DESTINATION
+  // 7. SOURCEMAPS: RELOCATE ROOT PATHS
+  await relocateSourceMapRoot(ngPkg);
+
+  // 8. COPY SOURCE FILES TO DESTINATION
   await copySourceFilesToDestination(ngPkg, baseBuildPath);
 
-  // 8. WRITE PACKAGE.JSON and OTHER DOC FILES
+  // 9. WRITE PACKAGE.JSON and OTHER DOC FILES
   const packageJsonArtifactPaths: NgArtifacts = artifactFactory.calculateArtifactPathsForPackageJson(ngPkg);
   await writePackage(ngPkg, packageJsonArtifactPaths);
 

src/lib/steps/sorcery.ts

@@ -9,15 +9,19 @@ import { debug } from '../util/log';
  *
  * @param sourceFile Source file
  */
-export async function remapSourcemap(sourceFile: string): Promise<void> {
+export async function remapSourceMap(sourceFile: string): Promise<void> {
   debug(`re-mapping sources for ${sourceFile}`);
   const opts: any = {
     inline: false,
     includeContent: true,
   };
 
-  // Once sorcery loaded the chain of sourcemaps, the new sourcemap will be written asynchronously.
+  // Once sorcery loads the chain of sourcemaps, the new sourcemap will be written asynchronously.
   const chain = await sorcery.load(sourceFile);
+  if (!chain) {
+    throw new Error('Failed to load sourceMap chain for ' + sourceFile);
+  }
+
   await chain.write(opts);
 }
 
@@ -26,7 +30,7 @@ export async function remapSourcemap(sourceFile: string): Promise<void> {
  *
  * @param ngPkg Angular package data
  */
-export async function relocateSourcemapRoot(ngPkg: NgPackageData): Promise<void> {
+export async function relocateSourceMapRoot(ngPkg: NgPackageData): Promise<void> {
   const replaceValue: string = `~/${ngPkg.fullPackageName}`;
   await modifyJsonFiles(`${ngPkg.buildDirectory}/**/*.js.map`, (sourceMap: any): any => {
     sourceMap.sources = sourceMap.sources

src/lib/steps/uglify.ts

@@ -1 +1,44 @@
-const uglify = require('uglify-js');
+import { minify } from 'uglify-js';
+import { writeFile, readFile } from 'fs-extra';
+import { extname, basename } from 'path';
+import { debug, warn } from './../util/log';
+
+export async function minifyJsFile(inputPath: string): Promise<string> {
+  debug(`minifyJsFile: ${inputPath}`);
+
+  const fileExtension: string = extname(inputPath);
+  const pathWithNoExtension: string = inputPath.substring(0, inputPath.length - fileExtension.length);
+
+  const outputPath: string = `${pathWithNoExtension}.min${fileExtension}`;
+  const sourcemapOut: string = `${outputPath}.map`;
+  const inputFileBuffer: Buffer = await readFile(inputPath);
+  const inputSourceMapBuffer: Buffer = await readFile(`${inputPath}.map`);
+  const result = minify(inputFileBuffer.toString(), {
+    sourceMap: {
+      content: inputSourceMapBuffer.toString(),
+      url: basename(sourcemapOut)
+    },
+    parse: {
+      bare_returns: true,
+    },
+    ie8: true,
+    warnings: true,
+    output: {
+      comments: 'some'
+    }
+  });
+
+  if (result.warnings) {
+    for(const warningMessage of result.warnings) {
+      warn(warningMessage);
+    }
+  }
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  await writeFile(outputPath, result.code);
+  await writeFile(sourcemapOut, result.map);
+  return outputPath;
+}