Vite知识体系 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第11天
前端开发有几大痛点：模块化、资源编译、产物质量、开发效率；刚好今天了解到了一个很方便的前端构建工具，让我们来看一看吧！
前端构建工具的意义
模块化方案
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中被深度使用
Vite上手使用
项目初始化
提前安装pnpm
npm i -g pnpm
初始化命令
pnpm create vite
安装依赖
pnpm install
启动项目
npm rum dev
启动完成后，打开浏览区访问对应地址即可
生产环境Tree Shaking
优化原理：
1、基于ESM的import/export语句依赖关系，与运行时状态无关
2、在构建阶段将未使用到的代码进行删除
Tree Shaking 在 Vite 中无需配置，默认开启！
Vite给你最直观的印象如何？
- 响应迅速
- 开箱即用
Vite整体架构
关键技术：依赖预打包
为什么要进行预打包？
1、避免node_module过多的文件请求
2、将CommonJS格式转换为ESM格式
实现原理：
1、服务启动前扫描代码中用到的依赖
2、用Esbuild对依赖代码进行预打包
3、改写import语句，指定依赖为预构建产物路径
//改写前
import React from "react";
//改写后
import React from '/node_modules/.vite/react.js'
关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100X
局限性：
不支持类型检查
不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup
Vite进阶路线
深入双引擎
推荐学习路线：
- 先了解基本使用，动手尝试各项常用配置；
- 然后学习其插件开发。
为什么需要插件机制
- 抽离核心逻辑
- 易于扩展
总结
Vite的最大优点便是开箱即用，Vite支持 Vue 和 React 的模块热重载，可以准确的更新页面而无需重新加载页面或者删除应用程序状态。
学到这我想大家也对Vite有了初步的认识了吧，不如现在就开始尝试练习一下吧
如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）
作者：Yifan
日期：2022年7月24日
电子邮箱：1279640748@qq.com
