Vite简单介绍 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第5天

什么是Vite

Vite是新一代的前端开发和构建工具。

什么是构建工具，为什么需要构建工具

前端开发的核心要素就是各种各样的资源

如何管理这些资源就成为了一个问题，构建工具的出现使得资源的管理有了更好的解决方案。

Vite正是构建工具中的一员，作为新一代的构建工具，它有着这些特征

• No-bundle开发服务，源文件无需打包
• 生产环境基于Rollup的Bundler
• 高性能，dev启动速度和热更新速度非常快
• 简单易用，开发者体验好

vite上手使用

项目初始化

首先我们需要使用npm包管理工具来安装Vite

在启动完成之后，只需要打开浏览器访问对应地址即可。

目录结构

接下来，可以通过代码实现使用Sass/Scss，Css Modules以及使用静态资源的功能。

生产环境的Tree Shaking

这是一个打包优化机制，它的优化原理是：

• 基于ESM的import/export语句依赖关系，与运行时状态无关
• 在构建阶段将未使用的代码进行删除

在这个示例项目中，因为只用到了add函数，所以在打包的时候，只会打包add函数。

vite给人最直观的印象

1. 响应迅速
2. 开箱即用

Vite整体架构

关键技术：依赖预打包

为什么要进行预打包？

1. 避免node_modules过多的文件请求
2. 将CommonJS格式转换为ESM格式

实现原理

1. 服务启动前扫描代码中用到的依赖
2. 用Esbuild对依赖代码进行预打包
3. 改写import语句，指定依赖为预构建产物路径

关键技术：单文件编译

用Esbuild 编译 TS/JSX

优点：编译速度提升10-100x 局限性：

• 不支持类型检查
• 不支持语法降级到ES5

关键技术：代码压缩

关键技术：插件机制

开发阶段 → 模拟Rollup插件机制

生产环境 → 直接使用Rollup

进阶之路

在了解基本使用之后，我们可以更加深入地了解相关知识，比如：学习插件开发、代码分割、JS编译工具、语法安全降级、服务端渲染、底层标准等知识。