这是我参与「第五届青训营 」伴学笔记创作活动的第 15天
青训营课程笔记
为什么需要构建工具
前端构建工具的意义：
- 提供模块加载方案，兼容不同的规范化
- 高级语法转译，资源加载
- 产物压缩，无用代码删除，语法降级
- 热更新
Vite介绍
Vite是新一代前端构建工具，有两大组成部分：No-bundle开发服务，源文件无需打包，生产环境基于Rollup的Bundler，具有高性能，dev启动速度和热更新非常快，简单易用
行业趋势
目前全球浏览器对原生ESM的普遍技术支持占比92%以上，浏览器原生ESM支持有两大要素：
- script标签增加type="module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发优势：
- 无法打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
Vite功能等价于许多构建工具
Vite上手使用
- 项目初始化-启动完成打开浏览器访问对应地址即可
- 使用Sass/Scss&CSS Modules
- 使用静态资源-除了常见的图片格式，Vite也内置了对JSON等资源的加载支持
- 使用HMR，无需额外配置，自动开启
Vite响应迅速，开箱即用
Vite整体架构
关键技术
依赖预打包：
- 避免了node_modules过多文件请求
- 将CommonJS格式转换成ESM格式
单文件编译:
- 用Esbuild编译TS或JS
代码压缩：
- Esbuild作为默认的压缩工具 插件机制：
- 开发阶段-模拟Rollup插件机制
- 圣餐环境-直接使用Rollup
Vite进阶路线
先了解基本使用，动手尝试各项常用的配置，然后学习其插件的开发
插件开发
先看文档，过一遍插件钩子的功能，然后学习其他插件的实现，掌握套路
总结
Vite是前端构建工具，使用该工具很大程度上帮助我们完成对项目的开发，并使用众多内置框架，插件等，在熟悉其基本操作后，可学习其插件开发，逐步了解学习
