**这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天，**Vite
前端工程的痛点：核心要素-资源：模块化，资源编译，产物质量，开发效率
前端构建工具的意义：模块化方案：1、提供模块加载方案2、兼容不同模块规范，语法转译：高级语法转译，如Sass、TypeScript, 资源加载，如图片、字体、worker，产物质量：产物压缩、无用代码删除、语法降级，开发效率，热更新
Vite概览：定位新一代前端构建工具，两大组成部分：1、No-bundle开发服务，源文件无需打包，生产环境基于Rollup的Bundler核心特征，高性能，dev启动速度和热更新速度非常快，简单易用开发者体验好
当下问题：缓慢地启动》项目编译等待成本高，缓慢的热更新》修改代码后不能实时更新，瓶颈在哪里？，bundle带来的性能开销，JavaScirpt语言的性能瓶颈
浏览器原生ESM支持：两大要素1、scirpt标签增加type=module属性，2、使用ESM模块导入导出语法
基于原生ESM的开发服务优势：无需打包项目源代码，天然的按需加载，可以利用文件级的浏览器缓存
Esbuild-基于Golang开发的前端工具，具备如下能力：打包器Bundler，编译器Transformer，压缩器MInifier，性能极高，在vite中被深入使用
我们如何使用Vite呢？项目初始化：启动完成后，打开浏览器访问对应地址即可
使用静态资源：除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持。
使用HMR：无需额外配置，自动开启，生产环境Tree Shaking优化原理：基于ESM的import、export语句依赖关系，与运行时状态无关，在构建阶段将未使用到的代码删除
