Vite：新一代前端构建工具
前端开发的不断演进，催生了诸多构建工具，以满足模块化、性能、开发效率等需求。Vite 作为新一代前端构建工具，引领着这一演进趋势，以其出色的性能和简单易用的特点，成为众多开发者的首选。
前端构建工具的重要性
- 模块化方案： 前端构建工具允许开发者将代码分割成多个模块，实现更好的代码组织和维护。
- 语法转译： 构建工具可以将使用了较新语法的代码转译为浏览器可执行的旧版本代码，以确保在各种浏览器中运行。
- 产物质量： 构建工具能够对代码进行压缩、优化，从而减小文件大小，提升应用性能。
- 开发效率： 构建工具提供了热模块替换、自动刷新等功能，加速开发过程，提高开发效率。
Vite 概览
Vite 定位为新一代前端构建工具，其由两部分组成：
- No-bundle 开发服务： 源文件无需打包，利用原生 ES 模块（ESM）特性实现按需加载。
- 基于 Rollup 的 Bundler： 在生产环境中，Vite 使用 Rollup 进行打包，以生成最终的产物。
核心特征：
- 高性能： 开发环境下，Vite 拥有出色的启动速度和热更新速度，为开发者提供更流畅的体验。
- 简单易用： Vite 的配置简单明了，开发者无需复杂的配置即可开始开发，极大地提升了开发体验。
为了更好地理解 Vite 的创新之处，我们先来了解一下传统构建工具的瓶颈：
- 性能开销： 传统构建工具常常因为打包导致性能下降，特别是在开发环境中。
- JS 语言性能瓶颈： JavaScript 语言本身的性能瓶颈，特别是在大型项目中，会影响开发体验。
Vite 通过基于原生 ESM 的开发服务，获得了以下优势：
- 无需打包： 在开发阶段，Vite 无需对项目源代码进行打包，直接运行 ESM 源文件。
- 按需加载： 利用 ESM 的按需加载特性，提升了模块的加载速度。
- 浏览器缓存： 文件级的浏览器缓存可优化开发和生产环境的性能。
基于 Esbuild 的编译性能优化：
- 打包器 Bundler 对标 Webpack
- 编译器 Transformer
- 压缩器 Minifier
Vite 实战
项目初始化
#安装pnpm
npm i -g pnpm
#初始化命令
pnpm create Vite
#安装依赖
pnpm install
#启动项目
npm run dev
接入常用工具
#安装Sass
pnpm i sass -D
在生产环境中，Vite 默认开启 Tree Shaking，自动删除未使用的代码。
- 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite 整体架构
关键技术
- 依赖预打包： 避免 node_modules 过多的文件请求 将 CommonJS 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
-
单文件编译 不支持类型检查 不支持语法降级到 ES5
-
代码压缩
-
插件机制 开发阶段->模拟 Rollup 插件机制 生产环境->直接使用 Rollup
Vite 进阶路线
- 深入双引擎： esbuild、rollup.js
- Vite 插件开发： 抽离核心逻辑、易于拓展
- 代码分割（拆包）
- JS 编译工具（Babel） JS 语法标准繁多，浏览器支持程度不一 开发者需要用到高级语法
- 语法安全降级 上层解决方案：@Vitejs/plugin-legacy 底层原理：借助 babel 进行语法自动降级；提前注入 Polyfill 实现，如 core-js、regenerator-runtime
- 服务端渲染（SSR）
- 底层标准
- 社区生态
