With this change we add support to inline external Adobe fonts into the index html, we also add a `preconnect` hint which helps improve page load speed.
Closes#21186
Webpack is a large dependency with a large dependency graph. By only loading Webpack when needed in the differential loading and i18n processors, initial startup time can be improved and memory usage can be reduced.
The worker pool for differential loading and i18n processing is now managed by the `piscina` dependency. This dependency is already used within the recently added JavaScript optimizer refactoring and reduces both the number of direct dependencies and amount of code to setup the worker pools.
The javascript optimization pipeline is now a two-phase process. `esbuild` is used in the first phase to remove the majority of the unused code and shorten identifiers in each output bundle script. `esbuild` can accomplish this in a fraction of the time that `terser` previously required. However, `esbuild` does not yet implement all of the optimizations that `terser` performs. As a result, `terser` is used as a second phase to further optimize and reduce the size of the output bundle scripts. Since `terser` is operating on a smaller input size, the time required for `terser` to complete is significantly reduced. To further improve performance when source maps are enabled, the source map merging is now performed within the optimization workers. A maximum of four (4) optimization workers are currently used and this value can be adjusted via the `NG_BUILD_MAX_WORKERS` environment variable.
This change allows the linker sourcemap behavior to be controlled by the Webpack sourcemap configuration. For example, if a vendor file is being processed and vendor sourcemaps are disabled, the linker will now skip its internal sourcemap loading and processing steps.
The `esModuleInterop` option is recommended to be enable by TypeScript and corrects several assumptions TypeScript would otherwise make when importing CommonJS files.
This option change helps ensure compatibility as packages move towards ESM.
Reference: https://www.typescriptlang.org/tsconfig#esModuleInterop
With this change we enable Webpack's filesystem cache, this important because `terser-webpack-plugin`, `css-minimizer-webpack-plugin` and `copy-webpack-plugin` all use Webpacks' caching API to avoid additional processing during the 2nd cold build.
This changes causes `node_modules` to be treated as immutable. Webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot.
To opt-in using the experimental persistent build cache use the`NG_PERSISTENT_BUILD_CACHE` environment variable.
```
NG_PERSISTENT_BUILD_CACHE=1 ng serve
```
When not set, and browserslist returns no reesults due to the file being empty or commented. Webpack will generate invalid code because it doesn't know which enviorment we want to target.
```diff
- (self["webpackChunktest_app"] = self["webpackChunktest_app"] || []).push([["vendor"],{
/***/ 8583:
```
Closes#21111
With the support of TypeScript 4.3 within the Angular framework, the CLI now supports using TypeScript 4.3 as well. TypeScript 4.2 also continues to be supported for existing projects.
The `adjust-typescript-enums` plugin now includes an optional loose mode. This mode generates less code for an adjusted enum but differs from the canonical TypeScript enum structure emitted by the TypeScript compiler. This mode is only enabled for packages validated to operate correctly with this structure and is currently limited to first-party Angular packages. The adjusted structure is a variation of the previous build optimizer pass structure but better reflects the runtime behavior of the TypeScript emit structure.
The new babel-based build optimizer passes are now enabled when targetting ES2015 and higher. ES5 targets will currently continue to use the previous build optimizer. ES5 support will require additional refactoring of the downlevelling process as the new build optimizer passes are designed for ES2015 code.
