This content originally appeared on Angular Blog - Medium and was authored by Angular
Authors: Mark Thompson Charles Lyding
Angular now has support for TypeScript isolatedModules as of Angular 18.2. With this support in place, we’ve seen performance boosts of up to 10% in production build times.
We know that developers love performance improvements and in this blog post we’ll explain how you can take advantage of this feature in your projects.
Background
When using the application builder in your Angular app and the TypeScript isolatedModules option is enabled and script sourcemaps are disabled, TypeScript code will be transpiled via the bundler instead of the current behavior of using TypeScript. The use of the isolatedModules option ensures that TypeScript code can be safely transpiled without the need for the type-checker.
How it helps
Enabling this feature leads to several advantages. The bundler, esbuild in this case, now has knowledge of the TypeScript code constructs, such as enums, and can optimize the output code. It can inline both const and regular enums where possible. Additionally, this enables the removal of the Babel-based optimization passes for all TypeScript code. These passes are still present for all JavaScript code, for example code from third-party libraries/packages. These changes lead to an improvement in build time — especially in production configurations.
How to set it up
To enable this feature in your project, update your project’s TypeScript configuration file, typically tsconfig.json, to include "isolatedModules": true in the compilerOptions section:
"compilerOptions": {
...
"isolatedModules": true
}Note: to ensure optimal output code size in this setup, the useDefineForClassFields TypeScript option should either be removed or set to true which enables ECMAScript standard compliant behavior.
To learn more about the isolatedModules feature in TypeScript check out the documentation. Be sure to try out this update by running ng update and go build great apps.
Using isolatedModules in Angular 18.2 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Angular
Angular | Sciencx (2024-08-19T15:45:46+00:00) Using isolatedModules in Angular 18.2. Retrieved from https://www.scien.cx/2024/08/19/using-isolatedmodules-in-angular-18-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.