Vite详解及使用
1、Vite是什么？
Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热替换（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过 配置部分 自定义适应你的项目。
Vite 还提供了强大的扩展性，可通过其 插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。
2、Vite 与 Webpack 的对比详解
|
|
Vite |
Webpack |
|
诞生时间 |
2020年（由 Vue 作者开发） |
2012年（历史悠久） |
|
定位 |
新一代前端构建工具 |
传统打包工具 |
|
核心理念 |
开发时用 ESM，生产用 Rollup |
全程打包 |
核心区别：
(1) 开发模式运行机制
|
Vite |
Webpack |
|
|
启动方式 |
⚡ 无需打包，浏览器直接请求源码 |
🐢 先打包所有文件再启动 |
|
依赖处理 |
预构建依赖（仅一次） |
每次启动都重新分析依赖 |
|
HMR（热更新） |
只编译修改的文件，毫秒级响应 |
重新构建依赖链，速度较慢 |
比喻：
Webpack 像 “厨师先做好所有菜再上桌”（慢但稳定）。
Vite 像 “顾客点一道菜，厨师现做一道”（快但依赖浏览器 ESM）。
ESM（ES Modules） 是 JavaScript 的官方模块化标准，允许开发者使用 import/export 语法组织代码。
“依赖浏览器 ESM” 指的是 直接利用浏览器原生支持的模块系统，而不是像 Webpack 那样在开发阶段将所有代码打包成一个文件。
(2) 生产模式打包
|
Vite |
Webpack |
|
|
打包工具 |
使用 Rollup |
使用 Webpack 自身 |
|
打包速度 |
较快（Rollup 擅长 Tree Shaking） |
较慢（功能复杂） |
|
配置复杂度 |
更简单 |
更复杂（需手动优化） |
(3) 生态与插件
|
Vite |
Webpack |
|
|
插件数量 |
较少（但增长快） |
极多（成熟稳定） |
|
学习成本 |
低（开箱即用） |
高（需理解 Loader/Plugin） |
|
框架支持 |
Vue/React/Svelte 等主流框架 |
支持所有场景（包括非前端） |
3、Vite 的核心特点
(1) 极速启动
传统打包工具（如 Webpack）：启动时需要打包整个应用，速度较慢。
Vite：利用浏览器原生支持 ESM，直接按需加载源码，启动时间几乎瞬间完成。
(2) 闪电般的热更新（HMR）
修改文件后，仅重新编译当前文件，而不是整个应用，HMR 速度极快。
(3) 开箱即用的优化
内置对 TypeScript、JSX、CSS、JSON、静态资源 的支持。
生产环境使用 Rollup 进行高效打包。
(4) 框架无关
支持 Vue、React、Svelte、Lit 等主流前端框架。
4、Vite 核心原理
(1) 开发模式：基于 ESM 的按需加载
浏览器直接请求源码（如 .vue、.jsx 文件），Vite 服务器实时编译并返回。
无需打包，启动极快。
(2) 生产模式：Rollup 打包
使用 Rollup 进行 Tree Shaking、代码压缩等优化，生成高性能的静态资源。
5. 快速入门
如何使用 Vite 构建一个高效的 Vue 3.5 项目框架
项目环境： Node 版本：v21.6.1
1. 安装包管理工具： pnpm（快速、节省磁盘空间的包管理工具，与 npm 和 Yarn 类似）
npm install pnpm -g
2、使用vite创建项目
pnpm create vite
3、进入项目目录下
cd .vite-project-demo
4、安装依赖
pnpm install
5、启动测试
pnpm run dev
暂无评论内容