Vite知识体系：

模块化方案：（1）提供模块加载方案（2）兼容不同模块的规范
语法转译：（1）高级语法转译，如Sass\TypeScript(2)资源加载，如图片、字体、worker
产物质量：产物压缩，无用代码删除，语法降级
开发效率：热更新

两大组成部分：（1）No-bundle开发服务，源文件无需打包（2）生产环境基于Rollup的Bundler
核心特征：（1）高性能，dev启动速度和热更新速度非常快（2）简单易用，开发者体验好。

script标签增加type=module“属性
使用ESM模块导入导出语法

打包器Bundler
编译器Transformer
压缩器Minifier

提前安装 pnpm：npm i -g pnpm
初始化命令：pnpm create vite
安装依赖：pnpm install
启动项目： npm run dev

基于ESM的import/export语句依赖关系，与运行时的状态无关
在构建阶段将未使用到的代码进行删除

JavaScript语法标准繁多，浏览器支持程度不一
开发者需要用到高级语法

前端必须知道的开发调试知识：

点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名的生效效果
点击具体的样式值（字号、颜色、宽度高度等）可进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转道styles面板中的css规则。

console.table：具象化的展示JSON和数组数据
console.dir：通过类似文件树的方式展示对象的属性
占位符：给日志添加样式，可以突出重要的信息。%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符

展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javascript代码的调用栈

页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码
FPS指标：代表着每一帧的渲染情况

线上即时修改Overrides
利用代理解决开发阶段的跨域问题
启用本地source map
使用代理工具Mock数据
小黄鸭调试法