perf: reduce CSS parser CPU and retained comment state#21202
Conversation
Comments are now kept in a per-parse local array instead of the reused parser instance, and the internal-only getComments/parseCommentOptions methods become local closures — matching HtmlParser, which holds no per-parse comment state. No behavior or measurable perf/memory change.
|
This PR is packaged and the instant preview is available (bafc508). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@bafc508
yarn add -D webpack@https://pkg.pr.new/webpack@bafc508
pnpm add -D webpack@https://pkg.pr.new/webpack@bafc508 |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #21202 +/- ##
=======================================
Coverage 92.70% 92.71%
=======================================
Files 588 588
Lines 64144 64154 +10
Branches 17791 17795 +4
=======================================
+ Hits 59464 59478 +14
+ Misses 4680 4676 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Adds a pure css/module config case whose named @container rules exercise each arm of the container-keyword byte check, plus a non-fast-path url magic comment that drives the parseCommentOptions vm.runInContext path.
🦋 Changeset detectedLatest commit: 5c215fa The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Merging this PR will not alter performance
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ❌ | Memory | benchmark "many-chunks-commonjs", scenario '{"name":"mode-production","mode":"production"}' |
7.3 MB | 9.8 MB | -25.41% |
| ⚡ | Memory | benchmark "asset-modules-inline", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' |
323.2 KB | 216.1 KB | +49.55% |
| ⚡ | Memory | benchmark "css-modules", scenario '{"name":"mode-production","mode":"production"}' |
9 MB | 7.4 MB | +21.53% |
Tip
Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.
Comparing perf/css-parser-followups (5c215fa) with main (7552543)
Footnotes
-
18 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩
Summary
Follow-ups to #21196. Reduces CSS parser CPU and stops retaining per-parse comment state on the reused parser instance:
isSelfReferenceRequestand the@valueparser) to module scope, so they aren't recompiled per call.source.slice()+ regex in the@containerpure-mode keyword check with a length +startsWithbyte comparison (~69% faster on that operation in isolation; behavior-identical, lowercase-only).HtmlParser(which holds no per-parse comment state). This drops thethis.commentsinstance field and the internal-onlygetComments/parseCommentOptionsmethods.Build-level impact is small (CSS parsing is a fraction of a production build); the changes are allocation/CPU-neutral-to-positive and behavior-preserving.
What kind of change does this PR introduce?
perf (with a supporting refactor commit).
Did you add tests for your changes?
No new tests — these are behavior-preserving perf/refactor changes already covered by the existing CSS suites (
cssParsing-webpack.spectest,CssParser.unittest/WalkCssTokens.unittest, andConfigTestCasescss cases includingwebpack-ignoreand pure-mode). All pass with an unchanged failure set versus baseline.Does this PR introduce a breaking change?
No user-facing breaking change. The refactor removes two undocumented, internal-only
CssParsermethods (getComments,parseCommentOptions) that have no callers inside webpack; the equivalentJavascriptParsermethods are untouched.If relevant, what needs to be documented once your changes are merged or what have you already documented?
n/a
Use of AI
AI (Claude) was used to investigate the CSS/JS/HTML parsers, profile hot paths, implement these changes, and run the benchmarks. All changes were reviewed and validated against the existing test suites and
tsc. An attempted JavaScript-parser hook-dispatch optimization was prototyped, measured as performance-neutral, and reverted (not included here).Generated by Claude Code