https://knightli.com/tags/dev-server/ Recent content in Dev Server on KnightLi的博客 Hugo -- gohugo.io zh-cn Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/2026/06/06/vite-next-generation-frontend-tooling/ Sat, 06 Jun 2026 22:26:00 +0800 https://knightli.com/2026/06/06/vite-next-generation-frontend-tooling/ <p><code>vitejs/vite</code> 是现代前端项目里非常常见的构建工具。它的描述很短：Next generation frontend tooling. It&rsquo;s fast! 这句话基本概括了 Vite 的核心卖点：开发启动快、热更新快、配置相对轻。</p> <p>如果你这几年新建过 Vue、React、Svelte、Solid 或普通 TypeScript 前端项目，很可能已经用过 Vite。</p> <h2 id="为什么-vite-快">为什么 Vite 快 </h2><p>Vite 的快主要来自两个阶段的取舍：</p> <ul> <li>开发阶段：利用浏览器原生 ESM，避免一开始把整个项目打包；</li> <li>生产阶段：使用 Rollup 做优化构建；</li> <li>依赖预构建：用更快的工具处理依赖；</li> <li>HMR：模块级热更新，改哪里刷新哪里。</li> </ul> <p>传统 bundler 往往在项目变大后启动慢、热更新慢。Vite 把开发体验往“按需加载”方向推了一步。</p> <h2 id="适合哪些项目">适合哪些项目 </h2><p>Vite 适合：</p> <ul> <li>Vue / React / Svelte / Solid 项目；</li> <li>TypeScript 前端应用；</li> <li>组件库开发；</li> <li>静态站点和工具页面；</li> <li>中小型 Web App；</li> <li>需要快启动和快 HMR 的团队。</li> </ul> <p>大型项目也可以用，但要注意 monorepo、SSR、插件兼容、构建缓存和 legacy 浏览器支持。</p> <h2 id="使用时要注意什么">使用时要注意什么 </h2><p>Vite 默认体验很好，但不是完全不用配置：</p> <ul> <li>环境变量前缀和注入规则要理解；</li> <li>dev server 代理要配置清楚；</li> <li>alias、路径、tsconfig 要对齐；</li> <li>SSR 和库模式要单独看文档；</li> <li>插件版本和框架版本要匹配；</li> <li>生产构建仍然要看包体积和分包。</li> </ul> <p>不要把“开发快”误解成“生产构建不用管”。上线前仍然要看性能、缓存和兼容性。</p> <h2 id="小结">小结 </h2><p>Vite 已经成为现代前端默认选项之一。它不是因为概念复杂而流行，而是因为日常开发体验确实轻快。</p> <p>如果你还在用很老的脚手架，新项目可以优先试 Vite；老项目迁移则要先评估插件、构建流程和团队习惯。</p> <h2 id="参考来源">参考来源 </h2><ul> <li><a class="link" href="https://github.com/vitejs/vite" target="_blank" rel="noopener" >vitejs/vite - GitHub</a></li> </ul>