Vite 概述与核心概念

第一章Vite 概述与核心概念1.1 什么是 ViteVite法语意为快速发音/vit/是一个新一代前端构建工具由 Vue.js 作者尤雨溪开发。它旨在解决传统构建工具如 Webpack在开发体验上的痛点。核心定位开发服务器提供极速的冷启动和热更新生产构建基于 Rollup 的高效打包框架无关支持 Vue、React、Svelte、Solid 等主流框架1.2 为什么需要 Vite传统构建工具的瓶颈在 Webpack、Parcel 等工具中冷启动慢需要递归打包所有模块才能启动开发服务器热更新慢修改代码后重建整个依赖图随着项目规模增长HMR 时间线性增长配置复杂需要大量配置才能支持各种功能Vite 的解决思路利用浏览器原生 ES Modules (ESM)开发环境将应用分为依赖和源码两类依赖使用 esbuild 预构建一次处理源码直接通过浏览器请求按需编译1.3 Vite 的核心特性① 极速的冷启动传统工具打包所有模块 → 启动服务器 Vite启动服务器 → 浏览器请求时按需编译② 轻量快速的热更新基于 ESM 的 HMR 边界精确更新速度与项目规模解耦③ 开箱即用的功能TypeScriptJSX/TSXCSS 预处理器Less/Sass/SCSSCSS Modules静态资源处理④ 强大的插件系统兼容 Rollup 插件生态丰富的官方和社区插件⑤ 优化的生产构建基于 Rollup 的智能分包预加载指令自动注入CSS 代码分割1.4 Vite vs 其他构建工具特性ViteWebpackParcel冷启动速度极快1s慢分钟级中等HMR 速度极快随项目增长变慢快配置复杂度低高极低插件生态丰富兼容 Rollup最丰富有限生产构建Rollup成熟成熟成熟学习曲线平缓陡峭平缓1.5 适用场景最适合现代前端应用SPA、SSR组件库开发快速原型开发框架无关的项目不太适合需要兼容 IE11 的项目Vite 默认支持现代浏览器需要特殊构建流程的传统项目1.6 技术栈依赖Node.js16 版本浏览器支持 ES Modules 的现代浏览器包管理器npm/yarn/pnpm 任意1.7 快速体验# 创建项目npmcreate vitelatest my-app ----templatevue# 进入目录cdmy-app# 安装依赖npminstall# 启动开发服务器npmrun dev访问http://localhost:5173修改任意文件观察极速的热更新。本章小结Vite 通过利用浏览器原生 ESM和智能预构建重新定义了前端开发体验。它的核心思想是开发时按需编译启动即用构建时利用成熟工具Rollup保证生产质量下一章将深入 Vite 的内部工作原理。