fix(@angular-devkit/build-angular): don't generate vendor.js.map when vendor sourcemaps is disabled

This reduced the build time of an `ng new` application from `5920ms` to `4616ms`

Closes #18060

Author: alan-agius4

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

@@ -27,6 +27,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     styles: stylesSourceMap,
     scripts: scriptsSourceMap,
     hidden: hiddenSourceMap,
+    vendor: vendorSourceMap,
   } = buildOptions.sourceMap;
 
   if (subresourceIntegrity) {
@@ -53,6 +54,8 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
       scriptsSourceMap,
       stylesSourceMap,
       wco.differentialLoadingMode ? true : hiddenSourceMap,
+      false,
+      vendorSourceMap,
     ));
   }
 

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

@@ -22,9 +22,9 @@ export function getServerConfig(wco: WebpackConfigOptions): Configuration {
   } = wco.buildOptions;
 
   const extraPlugins = [];
-  const { scripts, styles, hidden } = sourceMap;
+  const { scripts, styles, hidden, vendor } = sourceMap;
   if (scripts || styles) {
-    extraPlugins.push(getSourceMapDevTool(scripts, styles, hidden));
+    extraPlugins.push(getSourceMapDevTool(scripts, styles, hidden, false, vendor));
   }
 
   const externals: Configuration['externals'] = [...externalDependencies];

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

@@ -48,13 +48,18 @@ export function getTestConfig(
     });
   }
 
-  if (sourceMap.scripts || sourceMap.styles) {
-    extraPlugins.push(getSourceMapDevTool(
-      sourceMap.scripts,
-      sourceMap.styles,
-      false,
-      true,
-    ));
+  if (sourceMap) {
+    const { styles, scripts, vendor } = sourceMap;
+
+    if (styles || scripts) {
+      extraPlugins.push(getSourceMapDevTool(
+        scripts,
+        styles,
+        false,
+        true,
+        vendor,
+      ));
+    }
   }
 
   return {

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

@@ -73,6 +73,7 @@ export function getSourceMapDevTool(
   stylesSourceMap: boolean | undefined,
   hiddenSourceMap = false,
   inlineSourceMap = false,
+  vendorSourceMap = false,
 ): SourceMapDevToolPlugin {
   const include = [];
   if (scriptsSourceMap) {
@@ -93,6 +94,7 @@ export function getSourceMapDevTool(
     sourceRoot: inlineSourceMap ? '' : 'webpack:///',
     moduleFilenameTemplate: '[resource-path]',
     append: hiddenSourceMap ? false : undefined,
+    exclude: vendorSourceMap ? undefined : /vendor.*\.js/,
   });
 }
 

packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts

@@ -50,9 +50,7 @@ describe('Browser Builder with differential loading', () => {
       'runtime-es5.js.map',
 
       'vendor-es2015.js',
-      'vendor-es2015.js.map',
       'vendor-es5.js',
-      'vendor-es5.js.map',
 
       'styles.css',
       'styles.css.map',
@@ -90,9 +88,7 @@ describe('Browser Builder with differential loading', () => {
       'runtime-es5.js.map',
 
       'vendor-es2016.js',
-      'vendor-es2016.js.map',
       'vendor-es5.js',
-      'vendor-es5.js.map',
 
       'styles.css',
       'styles.css.map',
@@ -130,9 +126,7 @@ describe('Browser Builder with differential loading', () => {
       'runtime-es5.js.map',
 
       'vendor-esnext.js',
-      'vendor-esnext.js.map',
       'vendor-es5.js',
-      'vendor-es5.js.map',
 
       'styles.css',
       'styles.css.map',
@@ -158,7 +152,6 @@ describe('Browser Builder with differential loading', () => {
       'runtime.js.map',
 
       'vendor.js',
-      'vendor.js.map',
 
       'styles.css',
       'styles.css.map',

packages/angular_devkit/build_angular/src/browser/specs/vendor-source-map_spec.ts

@@ -34,7 +34,7 @@ describe('Browser Builder external source map', () => {
     expect(hasTsSourcePaths).toBe(true, `vendor.js.map should have '.ts' extentions`);
   });
 
-  it('does not map sourcemaps from external library when disabled', async () => {
+  it(`does not generate 'vendor.js.map' when vendor sourcemap is disabled`, async () => {
     const overrides = {
       sourceMap: {
         scripts: true,
@@ -44,8 +44,6 @@ describe('Browser Builder external source map', () => {
     };
 
     const { files } = await browserBuild(architect, host, target, overrides);
-    const sourcePaths: string[] = JSON.parse(await files['vendor.js.map']).sources;
-    const hasTsSourcePaths = sourcePaths.some(p => path.extname(p) == '.ts');
-    expect(hasTsSourcePaths).toBe(false, `vendor.js.map not should have '.ts' extentions`);
+    expect(files['vendor.js.map']).toBeUndefined();
   });
 });

tests/legacy-cli/e2e/tests/build/sourcemap.ts

@@ -15,10 +15,10 @@ export default async function () {
   await ng('build', '--output-hashing=bundles', '--source-map');
 
   await ng('build', '--prod', '--output-hashing=none', '--source-map');
-  await testForSourceMaps(6);
+  await testForSourceMaps(5);
 
   await ng('build', '--output-hashing=none', '--source-map');
-  await testForSourceMaps(8);
+  await testForSourceMaps(6);
 }
 
 async function testForSourceMaps(expectedNumberOfFiles: number): Promise <void> {
@@ -29,7 +29,7 @@ async function testForSourceMaps(expectedNumberOfFiles: number): Promise <void>
 
   let count = 0;
   for (const file of files) {
-    if (!file.endsWith('.js')) {
+    if (!file.endsWith('.js') || file.startsWith('vendor-')) {
       continue;
     }