</h1>

<h2>
  
</h2>

<p>
  
</p>

<section>
  <h2>Vite 简介</h2>

  <p>
    Vite 是一个用于前端开发的现代化构建工具，它可以帮助开发者快速搭建开发环境，并提供热重载等功能，以提高开发效率。
  </p>

  <p>
    Vite 的主要特点包括：
  </p>

  <ul>
    <li>快速启动：Vite 使用 Vite 开发服务器，可以极大地缩短启动时间。</li>
    <li>热重载：Vite 提供了热重载功能，可以使你在保存代码后立即看到更改。</li>
    <li>模块化：Vite 使用模块化开发，这使得代码组织更加清晰。</li>
    <li>浏览器支持：Vite 支持主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。</li>
  </ul>
</section>

<section>
  <h2>Vite 本地开发服务器</h2>

  <p>
    Vite 本地开发服务器是一个 HTTP/2 服务器，它负责将源代码编译成浏览器可以运行的代码，并通过 WebSocket 与浏览器建立连接，以便在代码更改时快速刷新页面。
  </p>

  <p>
    Vite 本地开发服务器的工作流程如下：
  </p>

  <ol>
    <li>启动 Vite 本地开发服务器。</li>
    <li>服务器监听文件系统中的更改。</li>
    <li>当检测到文件更改时，服务器会重新编译源代码。</li>
    <li>服务器将编译后的代码发送给浏览器。</li>
    <li>浏览器解析编译后的代码并将其渲染到页面上。</li>
  </ol>
</section>

<section>
  <h2>Vite 源码解读</h2>

  <p>
    Vite 源码位于 GitHub 上，你可以通过以下链接访问：
  </p>

  <a href="https://github.com/vitejs/vite">https://github.com/vitejs/vite</a>

  <p>
    Vite 源码是一个非常庞大的项目，因此我们不可能在本文中全部解读完。但是，我们可以重点关注 Vite 本地开发服务器的部分。
  </p>

  <p>
    Vite 本地开发服务器的入口文件是 <code>server.ts</code>，这个文件主要负责启动服务器并监听文件系统中的更改。
  </p>

  <p>
    当检测到文件更改时，Vite 本地开发服务器会调用 <code>build</code> 方法重新编译源代码。这个方法位于 <code>build.ts</code> 文件中。
  </p>

  <p>
    <code>build</code> 方法会首先解析源代码，然后将其编译成浏览器可以运行的代码。最后，编译后的代码会被发送给浏览器。
  </p>
</section>

<section>
  <h2>总结</h2>

  <p>
    通过对 Vite 源码的解读，我们了解到了 Vite 本地开发服务器的工作流程以及实现原理。这有助于我们更好地理解 Vite 的工作方式，并为我们开发前端项目提供帮助。
  </p>
</section>