Skip to content

Commit e6c45c3

Browse files
clydindgp1130
authored andcommitted
perf(@angular-devkit/build-angular): reduce babel transformation in esbuild builder
When using the experimental esbuild-based browser application builder, babel transformation is now only performed on a file if the file requires the specific transformations enabled for the build. This has the benefit of removing the need to parse and process files that will not be affected by the enabled transformations. From initial testing, this provides a 30% build time improvement for development builds of a newly generated application and a 10% improvement for production builds. (cherry picked from commit 3e3dc69)
1 parent 38b71bc commit e6c45c3

File tree

1 file changed

+36
-11
lines changed

1 file changed

+36
-11
lines changed

packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts

+36-11
Original file line numberDiff line numberDiff line change
@@ -323,11 +323,23 @@ export function createCompilerPlugin(
323323
};
324324
}
325325

326+
const data = typescriptResult.content ?? '';
327+
const forceAsyncTransformation = /for\s+await\s*\(|async\s+function\s*\*/.test(data);
326328
const useInputSourcemap =
327329
pluginOptions.sourcemap &&
328330
(!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
329331

330-
const data = typescriptResult.content ?? '';
332+
// If no additional transformations are needed, return the TypeScript output directly
333+
if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations) {
334+
return {
335+
// Strip sourcemaps if they should not be used
336+
contents: useInputSourcemap
337+
? data
338+
: data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
339+
loader: 'js',
340+
};
341+
}
342+
331343
const babelResult = await transformAsync(data, {
332344
filename: args.path,
333345
inputSourceMap: (useInputSourcemap ? undefined : false) as undefined,
@@ -341,7 +353,7 @@ export function createCompilerPlugin(
341353
[
342354
angularApplicationPreset,
343355
{
344-
forceAsyncTransformation: /for\s+await\s*\(|async\s+function\s*\*/.test(data),
356+
forceAsyncTransformation,
345357
optimize: pluginOptions.advancedOptimizations && {},
346358
},
347359
],
@@ -356,6 +368,26 @@ export function createCompilerPlugin(
356368
);
357369

358370
build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
371+
const data = await fs.readFile(args.path, 'utf-8');
372+
const forceAsyncTransformation =
373+
!/[\\/][_f]?esm2015[\\/]/.test(args.path) &&
374+
/for\s+await\s*\(|async\s+function\s*\*/.test(data);
375+
const shouldLink = await requiresLinking(args.path, data);
376+
const useInputSourcemap =
377+
pluginOptions.sourcemap &&
378+
(!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
379+
380+
// If no additional transformations are needed, return the TypeScript output directly
381+
if (!forceAsyncTransformation && !pluginOptions.advancedOptimizations && !shouldLink) {
382+
return {
383+
// Strip sourcemaps if they should not be used
384+
contents: useInputSourcemap
385+
? data
386+
: data.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
387+
loader: 'js',
388+
};
389+
}
390+
359391
const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
360392

361393
const linkerPluginCreator = (
@@ -364,11 +396,6 @@ export function createCompilerPlugin(
364396
)
365397
).createEs2015LinkerPlugin;
366398

367-
const useInputSourcemap =
368-
pluginOptions.sourcemap &&
369-
(!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
370-
371-
const data = await fs.readFile(args.path, 'utf-8');
372399
const result = await transformAsync(data, {
373400
filename: args.path,
374401
inputSourceMap: (useInputSourcemap ? undefined : false) as undefined,
@@ -383,13 +410,11 @@ export function createCompilerPlugin(
383410
angularApplicationPreset,
384411
{
385412
angularLinker: {
386-
shouldLink: await requiresLinking(args.path, data),
413+
shouldLink,
387414
jitMode: false,
388415
linkerPluginCreator,
389416
},
390-
forceAsyncTransformation:
391-
!/[\\/][_f]?esm2015[\\/]/.test(args.path) &&
392-
/for\s+await\s*\(|async\s+function\s*\*/.test(data),
417+
forceAsyncTransformation,
393418
optimize: pluginOptions.advancedOptimizations && {
394419
looseEnums: angularPackage,
395420
pureTopLevel: angularPackage,

0 commit comments

Comments
 (0)