Feature request: provide option for removing all spaces arround tag

What problem does this feature solve?

For now, spaces around text tag will be kept at least one space: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options

<!-- source -->
<div>
  <span>
    foo
  </span>   <span>bar</span>
</div>

<!-- whitespace: 'preserve' -->
<div> <span>
  foo
  </span> <span>bar</span> </div>

<!-- whitespace: 'condense' -->
<div><span> foo </span> <span>bar</span></div>

Sometimes, it will keep some space we don’t want:

<!-- source -->
<span>
  一段很长的文字………………，
<span>

<!-- become -->
<span> xx </span>

<!-- if we write source like this -->
<span>a_long_long_chinese_characters…<span>

<!-- it will be formatted by prettier or etc like this, very bad -->
<span
  >a_long_long_chinese_characters…</span
>

Our code standard always: build tool (webpack) will kill all spaces around tag. If we need a real space, use   like this:

<!-- source if no need for spaces -->
<span>
    <i class="icon"></i>
    文本
</span>
<!-- result -->
<span><i class="icon"></i>文本</span>

<!-- source if need for spaces -->
<span>
    &nbsp;
    <i class="icon"></i>
    &nbsp;文本&nbsp;
</span>
<!-- result -->
<span>&nbsp;<i class="icon"></i>&nbsp;文本&nbsp;</span>

In this way, we get a great experience with react and vue@1.x (compress html myself).

now we are using SFC, vue-loader haven’t provide this option. Spaces around tag will be kept at least one space. So we hope vue-loader can provide an option to remove these spaces.

What does the proposed API look like?

compilerOptions: {
  whitespace: 'collapse'
}

[masquevil]

I can list more example, but it is not what I’m requesting. JSX has this feature, And I think there should be an ability for developer to choose which code style they prefer, rather than no choice.

eg1: Which one do you think is the best? We choose 3.

<!-- source code 1 -->
<p attr1="1" attr2="1" attr3="1" attr4="1" attr5="1" attr6="1" attr7="1" attr8="1">a_long_long_chinese_sentence………………………………</p>

<!-- source code 2 -->
<p
  attr1="1"
  attr2="1"
  attr3="1"
  attr4="1"
  attr5="1"
  attr6="1"
  attr7="1"
  attr8="1"
>a_long_long_chinese_sentence………………………………</p>

<!-- source code 3 -->
<p
  attr1="1"
  attr2="1"
  attr3="1"
  attr4="1"
  attr5="1"
  attr6="1"
  attr7="1"
  attr8="1"
>
  a_long_long_chinese_sentence………………………………
</p>

eg2: Which one do you think is better? We choose 1.

<!-- source code 1 -->
<router-link
  v-if="someCondition"
  class="link-type-a"
  to="an-long-long-url"
>
  <icon type="some-icon" />
  <span class="highlight-link">text</span>
</router-link>
<router-link
  v-else
  class="link-type-b"
  to="an-long-long-url"
>
  text
</router-link>

<!-- source code 2 -->
<router-link
  v-if="someCondition"
  class="link-type-a"
  to="an-long-long-url"
>
  <icon type="some-icon" />
  <span class="highlight-link">text</span>
</router-link>
<router-link
  v-else
  class="link-type-b"
  to="an-long-long-url"
>text</router-link>

[Justineo]

As I understand the feature you are asking for is exactly the same with the original proposal here in #9208. Maybe we can add a new value for the whitespace option value like 'jsx'? @yyx990803