Vite基本概要

1.构建Vite的原因

对资源的整合（前端工程的痛点）：
模块化
资源编译
产物质量
开发效率
前端构建工具的意义

graph TD
模块化方案 --> 1.提供模块化加载方案2.兼容不同模块规范\
语法转译 --> 1.高级语法转译,如Sass,Typescript2.资源加载.如图片,字体,worker

graph TD
产品质量 --> 产品压缩,无用代码删除,语法降级\
开发效率 --> 热更新

2.Vite是什么？

定位：新一代前端构建工具
两大组成部分：
1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup的Bundler
核心特征
1.高性能，dev启动速度和热更新速度非常快
2简单易用，开发者体验好
传统构建工具问题：
缓慢的启动->项目编译等待成本高
缓慢的热更新->修改代码后不能实时更新
瓶颈在哪里？
bundle带来的性能开销
Javascript语言的性能瓶颈
行业趋势： 全球浏览器对原生ESM的普遍支持（92%以上） 两大要素： 1.script标签增肌type=“module”属性 2.使用ESM模块导入导出语法 开发优势： 无需打包项目源代码 天然的按需加载 可以利用文件级的浏览器缓存 3.基于Esbuild的编译性能优化 优势：打包器：bundler Transformer Minifier 性能极高，在Vite中被深度使用

Vite进阶路线 构建引擎： esbuild,rollup.js 顺序：
先了解基本使用，动手尝试各项常用配置；
其次学习插件开发
为何学习插件机制？
1.抽离核心逻辑
2.易于拓展
Vite 插件开发 1.服务启动阶段： config-> configResolved->options->configureServer->buildStart
2.请求响应阶段 transformIndexHtml
resolved->load->transform
3.热更新阶段
handleHotUpdate
4.服务关闭阶段
buildEnd->closeBundle