Subscribe on changes!

SFC compiler produces bloated sourcemaps

avatar
Sep 25th 2020

Version

3.0.0

Reproduction link

https://github.com/vitejs/vite/tree/master/playground

Steps to reproduce

  • Build any Vue application with an SFC
  • Inspect the sourcemap output

What is expected?

Sourcemap should contain minimal number of mappings

What is actually happening?

Sourcemap contains separate mapping for every single non-whitespace character


This behavior was introduced with commit 698c8d3. I'm unsure if there was some kind of rationale behind this change (I am not super familiar with sourcemaps, so please explain if I'm missing something), but I have been trying to debug some issues I was having with sourcemaps in a plugin I am writing for Vite, and I noticed that the mappings for Vue 3 SFC files are massive. For the Vite playground application (here), the "mappings" field in the sourcemap for the main App.vue is over 10kB. When I load up the sourcemap in this visualizer, you can see how each character has its own separate mapping entry.

https://i.imgur.com/ulKE756.png

When I apply this change to only apply 1 mapping per line, the "mappings" field goes down to ~300 bytes, and the visualization looks like this:

https://i.imgur.com/CfZZtgF.png

I'm opening this as an issue because it seems as though this change was introduced intentionally, but I don't understand what the purpose of it would be - so I was hoping to get an explanation. I can open a pull request if my change is the desired behavior.

avatar
Sep 28th 2020

I've found some references here and here to "high resolution" source maps that map each individual character to ensure completely accurate column numbers for errors, so it seems like that is what this change was meant to implement. Closing this since it sounds like this is somewhat standard practice.