Vite | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

重点内容： 🍎Vite🍎

🍑前言🍑

最近一直在学习工程化的相关内容，而今天也接触到一个新的工程化工具Vite，一起来看一下Vite的相关内容吧。

🥭构建工具的意义🥭

前端构建工具的意义主要分为以下四个方面：

1. 模块化方案：提供模块加载方案；兼容不同模块规范。
2. 语法转译：高级语法转译，如 Sass、TypeScript；资源加载，如图片、字体、worker。
3. 产物质量：产物压缩、无用代码删除、语法降级。
4. 开发效率：热更新

🍊Vite概览🍊

定位：新一代前端构建工具

两大组成部分：

1. No-bundle 开发服务，源文件无需打包，这与传统的资源打包工具完全不同。
2. 生产环境基于 Rollup 的 Bundler

核心特征

1. 高性能：dev 启动速度和热更新速度非常快！
2. 简单易用：开发者体验好！

🍓基于源生ESM的开发服务优势🍓

浏览器发送文件请求，vite dev server会接收请求，然后自定义地进行一些文件的编译，最后返回给浏览器JS能识别的内容。
由于去除了之前bundle的开销，所以无需打包项目源代码；一个文件就是一个请求，需要哪个文件，才发送哪个请求，返回哪个信息，实现了按需加载；同时由于都是文件，所以当更改一个文件时，不会导致整个bundle失效，只会导致当前请求的缓存失效，实现了文件级的浏览器缓存。

🍅基于Esbuild的编译性能优化🍅

Esbuild —— 基于Golang开发的前端工具，具备以下能力：

1. 打包器 Bundler，对标Webpack中的bundle功能。
2. 编译器 Transformer，对标Webpack中的babel功能。
3. 压缩器 Minifier，对标JS业界的代码压缩功能。

🥥Vite整体架构🥥

🥝关键技术🥝

1. 依赖预打包：vite dev server启动之前，会扫描代码用到的依赖，对依赖代码采用esbuild进行打包，然后把语句进行改写。
2. 单文件编译：用Esbuild编译TS/JSX等代码，速度非常快。但是不支持类型检查，也只能将代码降低到ES6,不能更低。
3. 代码压缩：Esbuild 作为默认压缩工具，替换传统的 Terser、Uglifyjs 等压缩工具。
4. 插件机制：在开发阶段，模拟Rollup的插件机制；在生产环境中，直接使用rollup。

🍒总结🍒

本节课程主要大致了解了一下Vite是什么，对比webpack和业界信息，分析了它的优势和劣势，介绍了其基本的使用，更深入的内容，感兴趣的同学可以去官方深入了解一下~