TNotes.vite

Appearance

to top

0015. vite 核心特性 ​

1. 🎯 本节内容 ​

  • vite 核心特性介绍

2. 🫧 评价 ​

  • 先对这些核心特性有个初步的印象，在后续的学习中会介绍其实现原理。

3. 🤔 vite 的核心特性都有哪些？ ​

  • 极速冷启动（基于原生 ES 模块）
  • 按需编译（仅编译当前请求的文件）
  • 热更新（HMR）速度快且精准
  • 开箱即用的 TypeScript、JSX、CSS 等支持
  • 支持多种前端框架（Vue、React、Svelte、Lit 等）
  • 支持 SSR（服务端渲染）和 SSG（静态站点生成）

4. 📒 极速冷启动（基于原生 ES 模块） ​

  • vite 区别于其他的构建工具，比如 webpack，核心的一个差一点就在于 vite 的开发服务器架构比较特别，在开发环境下是 no-bundle 的，因此 启动速度异常快。其它的一些差异点，大伙其实都差不太多。
  • Vite 利用现代浏览器对 原生 ES 模块（ESM） 的原生支持，在开发阶段直接通过 <script type="module"> 加载源码，无需打包整个应用。
  • 启动时仅启动一个轻量级开发服务器，不进行全量构建 -> no-bundle。
  • 首屏加载速度极快，尤其在大型项目中优势明显。
  • 依赖预构建使用 esbuild（Go 编写），比传统 JavaScript 打包器快 10–100 倍。

5. 📒 按需编译（仅编译当前请求的文件） ​

  • 开发服务器在浏览器请求某个模块时，才对该模块进行编译和转换（如 TypeScript → JavaScript、Sass → CSS）。
  • 未被访问的代码不会被处理，大幅减少启动和编译开销。
  • 结合浏览器缓存机制，已转换的模块可被缓存复用，提升后续加载速度。

6. 📒 热更新（HMR）速度快且精准 ​

  • HMR 指 热模块替换（Hot Module Replacement）
  • 基于原生 ESM，HMR 更新只影响修改的模块及其直接依赖，更新范围极小。
  • 无需重新打包整个应用，更新速度与应用规模无关。
  • 更新延迟通常在几十毫秒内，开发者几乎无感知，极大提升开发效率。

7. 📒 开箱即用的 TypeScript、JSX、CSS 等支持 ​

  • Vite 内置对主流前端技术的原生支持，无需额外配置。
  • TypeScript：自动编译 .ts/.tsx 文件，支持类型检查（需配合 IDE 或单独运行 tsc --noEmit）。
  • JSX：支持 React、Vue、Preact 等框架的 JSX 语法。
  • CSS：支持 CSS Modules、PostCSS、Sass/Less/Stylus（需安装对应插件）。
  • 静态资源：可直接导入图片、字体等资源，自动处理 URL 和哈希。

8. 📒 支持多种前端框架 ​

  • Vite 设计为框架无关，官方提供对主流框架的一等支持。
  • Vue：通过 @vitejs/plugin-vue 支持单文件组件（SFC）。
  • React：通过 @vitejs/plugin-react 支持 Fast Refresh。
  • Svelte、Lit、SolidJS 等均有官方或社区维护的插件。
  • 可轻松用于纯 JavaScript/TypeScript 项目或微前端架构。

9. 📒 支持 SSR（服务端渲染）和 SSG（静态站点生成） ​

  • Vite 不仅适用于客户端开发，也支持现代服务端渲染方案。
  • SSR 支持：提供构建和运行时 API，用于构建服务端入口和客户端入口。
  • SSG 支持：结合如 vite-ssg 等工具，可预渲染静态页面，适用于文档站、博客等场景。
  • 构建命令 vite build 默认使用 Rollup 进行生产打包，输出高度优化的静态资源。

🫧 Discussions

1027ac96-5fc4-4a8f-8e47-33d7f7d47d4c