vite 开发和构建有何不同？【热度: 292】

工程化阿里巴巴

关键词：vite、开发、构建

  1. 开发阶段

    • 快速的模块加载
      • 原理：在开发阶段，Vite 充分利用浏览器对原生 ES 模块（ESM）的支持。当浏览器请求一个模块时，Vite 直接将对应的 ES 模块文件发送给浏览器，而不需要像传统构建工具那样先进行打包。这使得模块加载速度非常快，因为浏览器可以直接解析和执行这些原生模块。
      • 示例：假设在一个 Vite 项目中有main.js和utils.js两个模块，main.js通过import { someFunction } from './utils.js';来引用utils.js中的函数。在开发服务器启动后，当浏览器访问main.js并遇到这个import语句时，Vite 会直接将utils.js发送给浏览器，浏览器能够快速地加载和执行这个模块。
    • 高效的模块热替换（HMR）
      • 原理：Vite 的 HMR 功能允许在修改代码后，只更新发生变化的模块，而不需要刷新整个页面。它通过建立一个 WebSocket 连接来实时监听文件变化。当一个模块被修改后，Vite 会将更新后的模块发送给浏览器，浏览器会用新模块替换旧模块，同时保持应用的当前状态。
      • 示例：如果在上述utils.js模块中修改了someFunction的实现，Vite 会检测到这个变化，通过 WebSocket 将更新后的utils.js发送给浏览器。浏览器接收到新模块后，会更新main.js中对someFunction的引用，并且应用的其他部分状态（如组件的局部状态）可以保持不变，从而实现了快速的热替换，提高了开发效率。
    • 开发服务器的便利性
      • 原理：Vite 提供了一个轻量级的开发服务器，它可以快速启动并且自动处理一些常见的开发任务，如解析import语句、处理 CSS 的@import等。这个开发服务器还支持一些开发时的功能，如自动打开浏览器、代理请求等。
      • 示例：在启动 Vite 开发服务器后，它可以自动打开默认浏览器并访问项目的首页。如果项目需要从后端 API 获取数据，并且开发环境和生产环境的 API 地址不同，Vite 的开发服务器可以通过配置代理，将前端请求转发到正确的后端 API 地址，方便开发过程中的联调。

  2. 构建阶段（主要是vite build）

    • 代码打包与优化
      • 原理：在构建阶段，Vite 使用 Rollup 作为打包工具（在vite build过程中）。Rollup 会对项目中的所有 ES 模块进行静态分析，将它们打包成一个或多个适合生产环境的文件。这个过程包括 Tree - Shaking（摇树优化），即剔除未使用的代码，以及作用域提升（Scope Hoisting）来优化代码结构，减少变量查找的层级，从而生成更紧凑、高效的代码。
      • 示例：假设有一个包含多个工具函数的utils.js模块，如export const add = (a, b) => a + b;，export const subtract = (a, b) => a - b;等。在main.js中只使用了add函数，通过import { add } from './utils.js';引用。在构建过程中，Rollup 会通过 Tree - Shaking 检测到subtract等未使用的函数，不会将它们打包到最终的输出文件中，减小了文件大小。
    • 资源处理与整合
      • 原理：Vite 在构建阶段会对各种资源（如 CSS、静态图像、字体等）进行处理。对于 CSS，它会将@import语句解析并将相关的 CSS 文件合并，还可能进行压缩和代码转换。对于静态资源，它会根据配置将它们复制到输出目录，并可能对文件名进行哈希处理，以方便缓存管理。
      • 示例：如果项目中有一个styles.css文件，其中通过@import导入了其他 CSS 文件，如@import 'normalize.css';。在构建时，Vite 会将normalize.css和styles.css合并成一个或多个 CSS 文件，并将它们放置在输出目录的合适位置，同时可能会对 CSS 进行压缩，减少文件大小，提高页面加载速度。
    • 输出格式和部署准备
      • 原理：构建阶段会根据配置生成适合生产环境部署的文件格式。Vite 可以生成多种格式的输出，如umd、es、cjs等，以满足不同的部署场景。例如，umd格式可以用于在浏览器中通过<script>标签直接引用，es格式适合现代浏览器和模块加载器，cjs格式可以用于在 Node.js 环境或者一些支持 CommonJS 的地方使用。
      • 示例：如果配置 Vite 的输出格式为umd，并且项目名称为my - app，构建后会生成一个my - app.umd.js文件，这个文件可以直接在 HTML 文件中通过<script>标签引用，并且已经经过了打包和优化，适合在生产环境中部署。