跪拜 Guibai
← All articles
Backend · Frontend · Programmer

Vue's Compiler Source-Map Rework Cuts CPU 30% and Fixes Wrong Line Numbers

By 前端之虎陈随易 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Build and debug workflows get a real speedup and more accurate source maps, but tool authors who rely on `@vue/compiler-sfc`'s MagicString export will need to update before upgrading, since the change lands in a minor version, not a patch.

Summary

A PR in Vue's core repo, from core member johnsoncodehk, swaps the compiler's source-map generation from a parallel magic-string and source-map-js setup to a design where each generated code fragment carries its own source range. This eliminates the misalignment that plagued multi-line expressions, `v-for`, and `v-model`, where error stacks pointed at the wrong line, and fixes over a dozen reported line-mapping bugs across compiler packages.

Benchmarks from a single run of 1,297 `.vue` files on Node 24 / Apple Silicon show hot-start CPU dropping from 2,988 ms to 2,108 ms (29% down), cold start from 4,517 ms to 3,575 ms, memory falling roughly a third to 40%, and parse time dropping 37%. Retained heap after parsing fell from 113.4 MB to 42 MB. The `compiler-sfc` dependency tree shrinks from 12 to 11 packages, browser bundles shrink 5-8%, and `source-map-js` is removed from most compiler packages.

The change is breaking: `MagicString` is no longer exported from `@vue/compiler-sfc`, and it lands in a minor release, not a patch. Ecosystem tests show eight of sixteen suites red (nuxt, vue-i18n, vuetify, router), attributed to snapshot updates and the new dependency being too fresh for package manager release-age policies. The PR also fixes `await await foo()`, `await` inside macro args, and triple evaluation of `defineModel` options. Notably, many commits are co-authored by Cursor Agent, with humans reviewing and editing.

Takeaways
— Hot-start CPU for the compile script dropped from 2,988 ms to 2,108 ms, a 29% reduction; peak memory fell from 848 MB to 563 MB.
— Cold start went from 4,517 ms to 3,575 ms, with memory from 759 MB to 445 MB, a 40% drop.
— Template compilation with inline mappings dropped 37%, with the parse phase going from 491 ms to 277 ms.
— Parsing 1,297 components, retained heap fell from 113.4 MB to 42.0 MB, a 63% reduction.
— `compiler-sfc`'s install tree went from 12 to 11 packages, and `source-map-js` was removed from several compiler packages, leaving one indirect dependency.
— Browser bundles: `compiler-sfc` 5% smaller, `compiler-vapor` 8% smaller, runtime global package essentially unchanged.
— Fixes beyond source maps: `await await foo()` now returns the correct value; `await` in macro args renders instead of throwing; `defineModel` options are evaluated once, not three times.
— Breaking change: `MagicString` is no longer exported from `@vue/compiler-sfc`, and the change lands in a minor version, not a patch.
— Ecosystem tests: 8 of 16 suites red after the change (nuxt, vue-i18n, vuetify, router), blamed on snapshot updates and the new dependency being too new for package manager release-age policies; the baseline run was green.
Conclusions

AI assistants are now writing substantive compiler code: many commits in this PR list Cursor Agent as a co-author, with humans reviewing and editing. That's a workflow shift in core OSS, not just a side project.

The architectural simplification from two parallel mapping systems to self-describing segments removes an entire class of line-number bugs; the performance gain is a side effect of deleting a whole bookkeeping layer.

The red ecosystem tests are largely due to snapshot updates and the new dependency being blocked by package managers' release-age policies, not necessarily regressions in the PR; that distinction matters when evaluating the change.

Benchmarks come from a single run on Apple Silicon with Node 24; they indicate a real improvement but aren't a rigorous cross-platform benchmark.

Concepts & terms
Source map
A mapping file that links generated code back to original source locations, so error stacks and debugger breakpoints point to the correct lines in `.vue` files.
magic-string
A library for editing strings while recording original positions; in the old Vue compiler it was paired with `source-map-js` to generate source maps.
source-map-js
A lightweight library for generating and consuming source maps; this PR removes it from most Vue compiler packages in favor of self-describing code segments.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗