使用Vite构建React项目时，两类代码注释是否会暴露给客户端浏览器？

先看你提供的示例代码：

export const Main = () => {

  useEffect(() => {
    // console.log("first type of comment.");
  }, [])
  
  return (
    <>
      {/* <div>Second type of comment.</div> */}
    </>
  );
}

开发模式（执行 vite 启动） #

• // 单行JS注释：这类注释会完整保留在开发环境的编译代码里。打开浏览器开发者工具的「Sources」面板，能在对应的组件源码中看到这些注释——毕竟Vite开发模式是按需编译，不会做代码压缩，所以注释不会被移除。
• {/* ... */} JSX注释：这类是React专属的JSX语法注释，不会被渲染到页面的DOM结构里，但在「Sources」面板的原始组件代码中依然能看到（因为Vite默认保留了源码映射）。简单说，页面上看不到，但源码里还在。

生产构建（执行 vite build） #

• // 单行JS注释：生产构建时Vite默认开启代码压缩（用Terser处理），这类普通JS注释会被彻底清除，客户端浏览器的任何面板里都找不到它们的踪影（除非你在vite.config.js里手动关闭了压缩配置）。
• {/* ... */} JSX注释：这类注释在编译阶段就会被Babel/ESBuild过滤掉，根本不会进入最终的生产打包文件。不管是页面的HTML结构，还是「Sources」面板里的生产代码，都找不到这类注释的痕迹。

内容的提问来源于stack exchange，提问作者hokwanhung