这是我参与「第四届青训营 」笔记创作活动的第12天
这节青训营的课程老师讲解了一下有关Vite的一些知识内容，以下是我的一些课堂笔记
课程大致内容：
- 浅谈构建工具
- Vite概要介绍
- vite上手实战
- Vite整体架构
- vite进阶路线
前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译，如：sass,typescript
- 资源加载，如图片，字体，worker
- 产物质量：产物压缩，无用代码删除，语法降级
- 开发效率： 热更新
Vite概览
- 定位：新一代前端构建工具
- 两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征
- 高性能：dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
- 当下问题：
- 缓慢的启动=》项目编译等待成本太高
- 缓慢的热更新=》修改代码后不能实时更新
开发体验问题日渐显露
浏览器原生ESM支持
两大要素：
- script标签增加type="module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
- 打包器：Bundler
- 编译器：Transformer (性能极高，在vite中被深度使用)
- 压缩器：Minifier
内置的web构建能力
vite开箱即用的功能等价于webpack,css-loader,less-loader,file-loader......
生产环境Tree Shaking
优化原理
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite插件开发
- 服务启动阶段
- 请求响应阶段
- 热更新阶段
- 服务关闭阶段
