perf(@angular/build): share sass directory and resolution caches across stylesheets - #34041
Merged
Merged
Conversation
angular-robot
Bot
added
area: performance
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces persistent caching for Sass compilation to improve performance. It shares the resolution and package root caches across compile requests in sass-language.ts and moves the directory cache in SassCompiler to a class-level property. The review feedback identifies a critical correctness issue where relative imports not starting with . are incorrectly cached globally, which can be resolved by qualifying all non-pkg: imports with the containing URL. Additionally, it is recommended to expose a public clearCache() method on SassCompiler to allow clearing the directory cache during rebuilds.
alan-agius4
added
the
target: minor
alan-agius4
force-pushed
the
perf/sass-caching
branch
from
September 8, 2026 13:14
956ccc0 to
2361ada
Compare
alan-agius4
added
the
action: review
…ss stylesheets Previously, Sass resolution caches (resolutionCache and packageRootCache) in sass-language.ts and the filesystem directory entry cache (directoryCache) in sass-service.ts were created anew for every individual stylesheet compilation request. When compiling applications that use component styles importing shared design tokens or library stylesheets (such as @angular/material or deep-imported @material/* packages), rebasing importers repeatedly invoked synchronous fs.readdirSync across the same node module package directories, and re-executed esbuild resolution calls. To eliminate redundant disk I/O and resolution overhead: - Hoist directoryCache to an instance property of SassCompiler, persisting directory listings across compile calls and clearing them upon compiler shutdown in close(). - Hoist resolutionCache and packageRootCache to module-scoped caches in sass-language.ts, clearing them during shutdownSassWorkerPool(). - Contextualize relative import resolution cache keys using the containing URL to preserve correctness while allowing package specifiers to resolve once across all stylesheets. In benchmarks on an application with 50 component SCSS stylesheets importing @angular/material, synchronous fs.readdirSync calls dropped from 2,900 to 205 (-92.9%), build.resolve calls dropped from 100 to 2 (-98.0%), and compilation time improved by up to 26.4%.
…es across stylesheets
alan-agius4
force-pushed
the
perf/sass-caching
branch
from
September 9, 2026 15:13
cf733f1 to
2119fd6
Compare
clydin
approved these changes
Sep 9, 2026
…es across stylesheets
alan-agius4
added
action: merge
Collaborator
Author
|
This PR was merged into the repository. The changes were merged into the following branches:
|
alan-agius4
added a commit
to alan-agius4/ng-packagr
that referenced
this pull request
Sep 9, 2026
…tylesheets Port angular/angular-cli#34041 to ng-packagr. Previously, Sass resolution caches (resolutionCache and packageRootCache) in sass-language.ts and the filesystem directory entry cache (directoryCache) in sass-service.ts were created anew for every individual stylesheet compilation request. To eliminate redundant disk I/O and resolution overhead: - Hoist directoryCache to an instance property of SassCompiler, persisting directory listings across compile calls and clearing them upon compiler shutdown in close() or clearCache(). - Hoist resolutionCache and packageRootCache to module-scoped caches in sass-language.ts, clearing them via resetSassWorkerPoolCaches() during shutdownSassWorkerPool() or when invalidating component stylesheets. - Contextualize relative import resolution cache keys and package root cache keys using the containing URL to preserve correctness while allowing package specifiers to resolve once across all stylesheets.
alan-agius4
added a commit
to ng-packagr/ng-packagr
that referenced
this pull request
Sep 9, 2026
…tylesheets Port angular/angular-cli#34041 to ng-packagr. Previously, Sass resolution caches (resolutionCache and packageRootCache) in sass-language.ts and the filesystem directory entry cache (directoryCache) in sass-service.ts were created anew for every individual stylesheet compilation request. To eliminate redundant disk I/O and resolution overhead: - Hoist directoryCache to an instance property of SassCompiler, persisting directory listings across compile calls and clearing them upon compiler shutdown in close() or clearCache(). - Hoist resolutionCache and packageRootCache to module-scoped caches in sass-language.ts, clearing them via resetSassWorkerPoolCaches() during shutdownSassWorkerPool() or when invalidating component stylesheets. - Contextualize relative import resolution cache keys and package root cache keys using the containing URL to preserve correctness while allowing package specifiers to resolve once across all stylesheets.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previously, Sass resolution caches (
resolutionCacheandpackageRootCache) insass-language.tsand the filesystem directory entry cache (directoryCache) insass-service.tswere created anew for every individual stylesheet compilation request.When compiling applications that use component styles importing shared design tokens or library stylesheets (such as
@angular/materialor deep-imported@material/*packages), rebasing importers repeatedly invoked synchronousfs.readdirSyncacross the same node module package directories, and re-executed esbuild resolution calls.To eliminate redundant disk I/O and resolution overhead:
directoryCacheto an instance property ofSassCompiler, persisting directory listings across compile calls and clearing them upon compiler shutdown inclose().resolutionCacheandpackageRootCacheto module-scoped caches insass-language.ts, clearing them duringshutdownSassWorkerPool().In benchmarks on an application with 50 component SCSS stylesheets importing
@angular/material, synchronousfs.readdirSynccalls dropped from 2,900 to 205 (-92.9%),build.resolvecalls dropped from 100 to 2 (-98.0%), and compilation time improved by up to 26.4%.