Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compiler: condense known attributes whitespace #4251

Closed
jods4 opened this issue Aug 4, 2021 · 1 comment · Fixed by #4432
Closed

Compiler: condense known attributes whitespace #4251

jods4 opened this issue Aug 4, 2021 · 1 comment · Fixed by #4432
Labels

Comments

@jods4
Copy link
Contributor

jods4 commented Aug 4, 2021

What problem does this feature solve?

Compiler automatically condense whitespace between elements (to a certain extent, controllable with whitespace option).

It does not condense spaces inside attributes. This can't be done in general because some whitespaces inside data-mine could be significant, but there are two well-known attributes that have non-significant whitespace and could easily be large: style and css (more could be added to the list).

Here we use prettier, which formats code in its own way -- and puts attributes on multiple lines when they're too big.
We also use Tailwind, which means we sometimes end up with a lot of classes on one tag.

Combine both and this markup is not unheard of in our codebase:
image

Since class whitespace is kept as-is by compiler, our production build contains very noticeable "holes" that needlessly contribute to its size:
image

If you look closely you see two elements whose css attribute is ~50% space for ~50% content.

Edge case: should we pay attention to spaces inside quotes for style? I can't come up with a reasonable example where this might be significant, but in theory it might. content: ' ' could be significant ws, except content is only useful in generated content -> not in an inline style.

What does the proposed API look like?

No new API.
The difference is in build output: style and class attributes should always have their whitespace condensed.

@posva
Copy link
Member

posva commented Aug 4, 2021

Related issue in vue 2 vuejs/vue#12113

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants