Vite知识体系 | 青训营笔记

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

本堂课课程大纲

1. 构建工具的意义
2. Vite 概览介绍
3. Vite 上手实战
4. Vite 整体架构
5. Vite 进阶路线

前端构建工具

前端工程的痛点

前端工程的核心要素——资源

问题与痛点：

• 📦模块化 ESM、CommonJS 、UMD
• 🔨资源编译 高级语法的编译
• 🍔产品质量 代码体积、代码性能
• 🚀开发效率 热更新

前端构建工具的意义

模块化方案——1.提供模块加载方案；2.兼容不同模块规范

语法转译——1.高级语法转译，如Sass、TypeScript；2.资源加载，如图片、字体、worker

产物质量——产物压缩、无用代码删除、语法降级

开发效率——热更新

初识Vite

Vite概览

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

📔两大组成部分：

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

💎核心特征

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

浏览器原生ESM支持

两大要素:

1. script标签增加type="'module"属性
2. 使用ESM模块导入导出语法

基于原生ESM的开发服务优势

基于Esbuild 的编译性能优化

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

1. 打包器Bundler
2. 编译器Transformer
3. 压缩器Minifier

🔥性能极高，在Vite中被深度使用

内置的Web构建能力

Vite开箱即用的功能等价于 webpack； webpack- dev- server； CSS- loader； style -loader； less- loader； sass-loader； postcss-loader； file- loader； MiniCssExtractPlugin； HTMLWebpackPlugin； ...

Vite 上手使用

1. 项目初始化
2. 使用Sass/Scss & CSS Modules
3. 使用静态资源

HMR、Tree Shaking在Vite中无需配置

Vite整体架构

关键技术:依赖预打包

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

关键技术:单文件编译

关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

关键技术：插件机制

进阶路线

深入双引擎

推荐学习顺序：

1. 先了解基本使用，动手尝试各项常用配置;
2. 然后学习其插件开发。

Vite插件开发

语法安全降级