-
Notifications
You must be signed in to change notification settings - Fork 12k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(@angular-devkit/build-angular): lazy modules bundle budgets
Since the introduction of Webpack 5 in version 12 bundle budgets for lazy chunks have been broken due to the removal of the `NamedLazyChunksPlugin`. https://github.com/angular/angular-cli/blob/21a49e6492dda1c4a325c0339518c3c110880d02/packages/angular_devkit/build_angular/src/webpack/plugins/named-chunks-plugin.ts#L8 With this change we re-introduce a similar plugin to allow setting bundle budgets on lazy chunks. This issue has also been reported on Slack by a GDE https://angular-team.slack.com/archives/C08M4JKNH/p1637115196222300 Closes: #11019
- Loading branch information
1 parent
1abd173
commit 4c288b8
Showing
3 changed files
with
76 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
packages/angular_devkit/build_angular/src/webpack/plugins/named-chunks-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC 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 { AsyncDependenciesBlock, Chunk, Compiler, Template, dependencies } from 'webpack'; | ||
|
||
// `ImportDependency` is not part of Webpack's depenencies typings. | ||
const ImportDependency: typeof dependencies.ModuleDependency = require('webpack/lib/dependencies/ImportDependency'); | ||
|
||
const PLUGIN_NAME = 'named-chunks-plugin'; | ||
|
||
/** | ||
* Webpack will not populate the chunk `name` property unless `webpackChunkName` magic comment is used. | ||
* This however will also effect the filename which is not desired when using `deterministic` chunkIds. | ||
* This plugin will populate the chunk `name` which is mainly used so that users can set bundle budgets on lazy chunks. | ||
*/ | ||
export class NamedChunksPlugin { | ||
apply(compiler: Compiler) { | ||
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => { | ||
compilation.hooks.chunkAsset.tap(PLUGIN_NAME, (chunk) => { | ||
if (chunk.name) { | ||
return; | ||
} | ||
|
||
const name = this.generateName(chunk); | ||
if (name) { | ||
chunk.name = name; | ||
} | ||
}); | ||
}); | ||
} | ||
|
||
private generateName(chunk: Chunk): string | undefined { | ||
for (const group of chunk.groupsIterable) { | ||
const [block] = group.getBlocks(); | ||
if (!(block instanceof AsyncDependenciesBlock)) { | ||
continue; | ||
} | ||
|
||
for (const dependency of block.dependencies) { | ||
if (dependency instanceof ImportDependency) { | ||
return Template.toPath(dependency.request); | ||
} | ||
} | ||
} | ||
|
||
return undefined; | ||
} | ||
} |