Charset missing for esbuild results a lot of \uxxx

[Mister-Hope]

Describe the bug

None ascii characters will be tranformed to \uxxx,

As a example, you can see generate code by vitepress in vite cn docs at https://cn.vitejs.dev/.

I am not pretty sure if vite "Choosed" to do this, but this is heavily increasing outputsize if the source content contains lots of static content with none ascii characters.

For a quick review for esbuild and vite, I think that esbuild provide charset and with it set to utf-8, none assii character like CJK characters or emoji can be preserved as is in js output code. However, vite seems not providing such a option.

I thint that even if vite choose to do this for compatability reasons, users should have alibilty to not covert them. I understand that this is not having a great increasement under gzip, but it does slower the deployment speed.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yftodz?file=main.js&terminal=dev

Steps to reproduce

No response

System Info

Test in stackblitz with links above.

Used Package Manager

npm

Logs

My demo results:

(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function r(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?t.credentials="include":e.crossorigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();const c="/assets/javascript.8dac5379.svg";function l(i){let o=0;const r=n=>{o=n,i.innerHTML=`count is ${o}`};i.addEventListener("click",()=>r(o+1)),r(0)}const a="\u4E00\u4E9B\u975E ASCII \u7684\u5B57\u7B26\u3002";document.querySelector("#app").innerHTML=`
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${c}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
    ${a}
  </div>
`;l(document.querySelector("#counter"));

And I don' think I should get const a="\u4E00\u4E9B\u975E ASCII \u7684\u5B57\u7B26\u3002" instead of const a= '一些非 ASCII 的字符。'

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I am not pretty sure if vite "Choosed" to do this,

I guess Vite is just using the default behavior of esbuild.
The reason seems to be: evanw/esbuild#773 (comment)

vite seems not providing such a option.

You could set esbuild.charset option.

import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    charset: 'utf8'
  }
})

[patak-dev]

I think we should explore changing the default in Vite 4. See #9870. Rollup ended up changing the markers so it isn't longer needed, but it still surprising to me.

[Mister-Hope]

Thanks for explaining.