1. 提供“秒开”的开发服务器为什么快核心原理老工具Webpack需要把整个项目所有的代码都打包编译完才启动服务器。项目越大启动越慢可能要等几十秒。Vite利用浏览器原生支持的 ES Modules (ESM)启动时不打包只把需要编译的文件如 .vue、.ts在浏览器请求时才实时编译。所以启动速度极快毫秒级。2. 编译时把 TS 和 Vue 文件翻译成浏览器能懂的语言浏览器只认识 HTML、CSS 和纯 JS不认识 .vue 文件也不认识 TypeScript。转译 TS当你写 const str: string hi 时Vite 会调用 esbuild一个用 Go 语言写的超快编译器把 TypeScript 剥掉转换成纯 JS。这比传统的 tsc 编译器快几十倍。解析 SFC单文件组件Vite 会把 App.vue 拆解成三部分script 部分 - 编译成 JStemplate 部分 - 编译成 render 函数style 部分 - 提取成 CSS最后把它们组合成一个浏览器可识别的 JS 模块。3. 提供依赖预构建解决“坑”问题你 npm install 的第三方库比如 lodash可能还是老旧的 CommonJS 格式或者包含很多零散的小文件。Vite 的做法在你第一次运行 npm run dev 时Vite 会把这些第三方库提前打包成 ESM 格式的一个大文件存放在 node_modules/.vite/deps 里。好处浏览器加载时只需要请求这 1 个大文件而不是请求几十上百个小文件极大提升页面加载速度。4. 生产时打包优化npm run build当你要把项目放到服务器上时你不能直接丢源码因为源码太大、太杂、有注释。打包压缩Vite 调用 Rollup一个非常成熟的打包器进行生产构建。它会做代码压缩Minify去掉空格、注释把变量名缩短生成体积更小的代码。代码分割Code Split把第三方库如 Vue 本身和你的业务代码分开打包。这样用户访问时如果只改了业务代码浏览器可以复用之前缓存的 Vue 库不用重新下载。资源指纹给打包后的文件加哈希值如 index.a1b2c.js解决浏览器缓存更新的问题。