这是我参与「第四届青训营 」笔记创作活动的第11天
Vite 知识体系
前端工程一直有个痛点，规范仍未形成大统一，模块化在前端仍有问题，浏览器的标准又远远赶不上前端开发者的创作，代码产物的体积压缩，常用语法的兼容性，开发效率如果没有构建工具的话效率很差。
所有有了前端构建工具，来解决以上的问题
重点知识点介绍
- Vite 是什么 和 为什么是 Vite？
- vite 整体架构
- vite 进阶路线
详细知识介绍
一、Vite 概览
Vite定位是新一代的前端构建工具，核心特征是高性能和简单易用
组成由两部分，No-bundle开发服务，源文件无需打包；生产环境基于 Rollup 的 Bundler
问题主要来源于
- bundle 打包带来的性能开销
- Javascript 语言的性能瓶颈
「 ESM 」 全称 ECMAScript modules，基本主流的浏览器版本都以已经支持。
针对以上问题，行业里出现两种趋势，一种是浏览器对原生ESM的普遍支持，另一种是基于原生语言（Go、Rust）编写的前端工具链，下面来一一分析
浏览器原生 ESM 支持：
两个要点，一是script标签增加type = "module"属性，二是使用ESM模板导入导出语法（export）
基于浏览器普遍支持 ESM ，Vite对此做了以下事情
vite本质上来就是一个dev开发时的server，编译，将浏览器能够识别的语法响应给浏览器
基于ESM的服务，可以去除bundle的开销，按需编译。
基于 Esbuild 的编译性能优化：
一种基于Golang开发的前端工具，原生语言使得在性能优化方面表现很好
在Vite不做任何配置时候具有以下功能：
webpack的一些基础，关于样式的一些编译工具，以及html等。默认集成度很高，可以从下图种看出来
二、Vite整体架构
分两块内容来看，开发和生产
vite主要有五个技术点
第一个是会有一个预打包过程，主要是 node-moudles 是一个非常不可控的，里面可能含有许多请求和文件引入，并且 node-moudles 的产物可能是不规范，vite依赖做了一个预打包
第二个是使用 Esbuild 编译 TS/JSX ，速度非常快，提升10-100倍。但是不支持类型检查和语法降级到ES5
第三个是代码压缩默认使用 Esbuild，替代传统的 Terser、Uglify.js等压缩工具，使得压缩性能得到极大提升
最后一个是插件机制，vite的插件既可以用于dev阶段也可以用于生产阶段
三、学习路线
二者的官方文档都写得非常详细，可以深入双引擎，这两天个都十分重要，可以先学会基本使用，尝试各种常用配置，然后再去学习插件开发
插件开发可以去看 vite 的文档。先看文档了解一遍钩子函数的功能，然后多学习其他插件的实现，掌握套路
也有些实战插件代码
- 复杂度较低的 json 加载插件github.com/vitejs/vite…
- 复杂度中等的 Esbuild接入插件github.com/vitejs/vite…
- 复杂度较高的 官方React插件 github.com/vitejs/vite…
JS的编译工具Babel也要学习，通过阅读官方文档
- babel 官方站点 What is Babel? · Babel (babeljs.io)
- babel 插件手册 github.com/jamiebuilds…
小结
Vite作为前端构建工具，具有许多有点并且高度集成化，学习vite的知识体系需要涉及许多打包方面的知识，最好的学习方式是去看他们的官方文档和指南。
