vite学习笔记
2026-10-18 16:24:40
一、常见打包工具
目前市面上常见的打包工具有 webpack、Rollup、Parcel 和 vite。
二、选择Vite的原因
传统打包工具（如冷启动和webpack的热模块加载）存在启动慢的问题，它们需要先抓取代码并完成构建，之后才能启动服务器。当代码量过大时，启动应用程序的速度会显著下降。Vite针对这一问题进行了优化，具体如下：
- 代码模块划分：Vite将代码分为依赖和业务代码两个模块。
依赖处理：使用 esbuild 预打包依赖，进行转换、抽取和合并依赖包，并将结果存放在 node_modules 中。esbuild具有极快的构建速度，能大幅减少依赖处理时间。
业务代码处理：采用本地的 ESM（ECMAScript Modules） 提供源代码。浏览器接管了一部分代码打包工作，根据浏览器访问的URL提供源代码，并将其转换为浏览器能识别的语言。这种方式使得启动速度提升了10 - 100倍。
三、Vite的核心特性
1. 快速的冷启动- 基于ESM的开发服务器：在开发环境下，Vite利用浏览器原生支持的ESM，无需对整个应用进行打包。当浏览器请求某个模块时，Vite的服务器动态地提供该模块的源代码，并进行必要的转换（如TypeScript转JavaScript、Sass转CSS等）。这种方式避免了传统打包工具在启动时需要构建整个应用的过程，实现了近乎即时的启动。
- 依赖预构建：虽然业务代码采用按需提供的方式，但依赖项通常需要提前构建和优化。Vite使用esbuild对依赖进行预构建，将它们转换为浏览器可以直接使用的格式，并合并成一个或多个文件。这样在浏览器请求业务代码时，依赖项可以快速加载，不会影响整体的启动速度。
- 高效更新：Vite的热模块替换机制在底层基于ESM实现。当开发者修改代码时，Vite的服务器能够精确地识别出哪些模块发生了变化，并只将这些变化的模块发送给浏览器进行更新，而不需要重新加载整个页面或应用。这种精细化的更新方式大大提高了开发效率，减少了开发过程中的等待时间。
- 状态保留：与传统的HMR实现不同，Vite的HMR能够在更新模块的同时保留应用的状态。这意味着开发者在修改代码后，无需手动恢复应用的状态，可以直接看到修改后的效果，进一步提升了开发体验。
- 业务代码按需处理：在开发过程中，Vite只对当前浏览器请求的模块进行编译和转换，而不是一次性编译整个应用。这种按需编译的方式减少了不必要的计算和资源消耗，提高了开发服务器的性能。
- 生产环境优化：在生产环境构建时，Vite使用Rollup进行打包，Rollup是一个专注于ES模块打包的工具，能够生成高度优化的静态资源。Vite根据项目的配置和需求，对代码进行Tree-shaking、代码分割等优化操作，减少最终打包文件的体积，提高应用的加载速度。
四、Vite的基本使用
1. 项目初始化可以使用以下命令通过Vite官方提供的脚手架工具初始化一个项目：
# 使用npmnpm create vite@latest# 使用yarnyarn create vite# 使用pnpmpnpm create vite执行上述命令后，按照提示选择项目模板（如Vue、React、Vanilla等），输入项目名称，即可生成一个基于Vite的项目结构。
2. 项目结构一个典型的Vite项目结构如下：
my-vite-project/├── node_modules/ # 项目依赖├── public/ # 公共资源，如图片、字体等，会被直接复制到构建输出目录├── src/│ ├── assets/ # 项目静态资源，如样式文件、图片等│ ├── components/ # Vue或React组件│ ├── App.vue/App.jsx # 项目根组件│ └── main.js/main.tsx # 项目入口文件├── index.html # 项目的主HTML文件├── vite.config.js # Vite的配置文件└── package.json # 项目配置和依赖信息3. 常用命令- 启动开发服务器：
该命令会启动Vite的开发服务器，并在浏览器中打开项目页面，默认地址为
- 构建生产环境代码：
执行此命令后，Vite会使用Rollup对项目进行打包和优化，生成的生产环境代码会存放在 dist 目录中。
- 预览生产环境代码：
该命令会在本地启动一个服务器，用于预览生产环境构建后的代码，方便开发者在部署前进行测试和检查。
五、Vite配置
Vite的配置主要通过 vite.config.js 文件进行。以下是一个简单的配置示例：
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue' // 如果使用Vueexport default defineConfig({ plugins: [vue()], // 注册Vue插件 server: { port: 3000, // 指定开发服务器端口 open: true // 启动服务器时自动打开浏览器 }, build: { outDir: 'build', // 指定生产环境构建输出目录 minify: 'terser' // 使用terser进行代码压缩 }})在上述配置中，通过 plugins 字段注册了Vue插件，以便在Vite项目中支持Vue单文件组件。server 字段用于配置开发服务器的相关选项，如端口号和是否自动打开浏览器。build 字段则用于配置生产环境构建的相关选项，如输出目录和代码压缩方式。
热门标签
