Descomplicando o Vite
Descomplicando o Vite / 简化 Vite：原理解析
Introdução Antes do Vite, ferramentas como Webpack/CRA funcionavam assim: pra você ver qualquer coisa no navegador, a ferramenta precisava primeiro empacotar (bundlar) todo o seu projeto — ler cada arquivo, resolver cada import, transformar tudo num (ou poucos) arquivo gigante de JS. Em projetos pequenos isso é rápido. Em projetos com milhares de módulos, esse “bundle inicial” podia levar dezenas de segundos, e toda vez que você salvava um arquivo, boa parte disso precisava ser refeito. A sacada do Vite: navegadores modernos já sabem importar módulos ES nativamente (
简介
在 Vite 出现之前，像 Webpack 或 CRA（Create React App）这类工具的工作方式是：为了在浏览器中看到任何内容，工具必须先将整个项目进行“打包”（bundle）——读取每个文件、解析每个 import，并将所有内容转换成一个（或少数几个）巨大的 JS 文件。在小型项目中，这很快；但在拥有数千个模块的项目中，这种“初始打包”可能需要几十秒。而且，每当你保存一个文件时，大部分工作都需要重新执行。Vite 的巧妙之处在于：现代浏览器已经原生支持 ES 模块（通过 <script type="module"> 以及浏览器直接支持的 import/export）。因此，在开发阶段，为什么还要打包呢？Vite 只是按需将每个文件作为单独的模块提供，只有当浏览器请求时才加载。
Comparação com restaurante Imagina um restaurante de buffet self-service. Antes de abrir as portas pro primeiro cliente, o chef precisa cozinhar o cardápio inteiro — todos os pratos, todas as guarnições, tudo, mesmo que você só queira um cafezinho. Só depois que tudo está pronto na bandeja é que a porta abre. Agora imagina que você é cliente fiel, vai lá todo dia, e pede pra trocar uma pitada de sal num prato. O que o chef faz? Ele não troca só o sal — ele manda o prato inteiro de volta pra cozinha, refaz boa parte do buffet de novo, porque os pratos dependem uns dos outros (o molho usa o tempero, a guarnição usa o molho…). E você, sentado na mesa, fica esperando o buffet inteiro reabrir. Isso é literalmente o Webpack clássico/CRA: antes de você ver qualquer coisa no navegador, ele precisa empacotar (bundlar) o projeto inteiro. E cada vez que você salva um arquivo, ele recalcula um bundle gigante de novo — quanto maior o projeto, mais demorado fica reabrir as portas.
餐厅比喻 想象一家自助餐厅。在向第一位顾客开门之前，厨师必须把整个菜单上的菜全部做完——所有的主菜、配菜，哪怕你只是想喝杯咖啡。只有当所有东西都摆在托盘上准备好后，餐厅才会开门。现在想象你是常客，每天都去，但你要求调整其中一道菜的盐量。厨师会怎么做？他不会只调整盐——他会把整道菜送回厨房，甚至重做大部分自助餐，因为菜品之间是相互依赖的（酱汁需要调料，配菜需要酱汁……）。而你坐在桌前，只能等着整个自助餐重新准备好。这正是传统的 Webpack/CRA：在你看到浏览器内容之前，它必须打包整个项目。而且每次你保存文件时，它都会重新计算一个巨大的 bundle——项目越大，重新开门的时间就越长。
Solução Agora o Vite. É um restaurante à la carte. A porta abre na hora, sem ninguém cozinhar nada antes. Você senta, olha o cardápio (o index.html), e pede só o que quer — “garçom, me traz o main.tsx”. O garçom vai até a cozinha, o chef prepara só esse prato, na hora, e te entrega. Você come e pede a sobremesa (App.tsx)? Aí sim ele prepara a sobremesa — só ela, não o cardápio inteiro de novo.
解决方案 现在看看 Vite。它就像一家点菜餐厅（à la carte）。餐厅随时开门，不需要提前烹饪任何东西。你坐下，看菜单（index.html），只点你想要的——“服务员，给我来一份 main.tsx”。服务员去厨房，厨师现做这道菜并端给你。你吃完后想要甜点（App.tsx）？这时他才会准备甜点——只准备甜点，而不是重新准备整个菜单。
As duas fases do Vite Isso é a ideia central: o Vite usa estratégias diferentes pra cada momento porque os dois momentos têm necessidades opostas.
Vite 的两个阶段 这就是核心思想：Vite 在不同阶段使用不同的策略，因为开发和生产环境有着截然不同的需求。
| Estratégia | Desenvolvimento (vite/vite dev) | Produção (vite build) |
|---|---|---|
| 策略 | 开发阶段 (vite dev) | 生产阶段 (vite build) |
| Serve módulos ESM nativos, sem bundlar | Empacota tudo via Rolldown (bundler em Rust) | |
| 提供原生 ESM 模块，无需打包 | 通过 Rolldown（Rust 编写的打包器）进行全量打包 | |
| Velocidade de start | Instantânea, não depende do tamanho do projeto | Leva o tempo proporcional ao projeto |
| 启动速度 | 瞬时启动，不依赖项目大小 | 时间与项目规模成正比 |
| Por quê essa diferença | Em dev, poucas requisições HTTP locais não importam — rede é instantânea | Em produção, centenas de arquivos separados = centenas de requisições HTTP reais pro usuário final, isso é ruim. Bundlar reduz isso |
| 为何有此差异 | 在开发中，少量的本地 HTTP 请求无关紧要——网络是瞬时的 | 在生产中，数百个独立文件意味着数百个真实的 HTTP 请求，这对最终用户来说很糟糕。打包可以减少这种情况 |