Webpack是目前整个前端使用最多的构建工具，但是除了Webpack之后也有其他的一些构建工具：
- 比如rollup、parcel、gulp、vite等等
对于Vite，官方的定位是：新一代前端开发与构建工具
那么我们先来说一下前端构建工具的意义：
- 模块化方案：提供模块加载方案，兼容不同模块规范
- 语法转译：高级语法转译，如Sass、TS，资源加载，如图片、字体、worker
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
那么，为什么选择vite？
在浏览器支持ES模块之前，JS并没有提供原生机制让开发者以模块化的方式进行开发。
缓慢的服务器启动
当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。
缓慢的更新
在vite中，HMR是在原生ESM上执行的，使启动速度大大加快。
一、Vite预览
- 定位：新一代前端构建工具
- 两大组成部分：No-bundle开发服务，源文件无需打包 | 生产环境基于Rollup的Bundler
- 核心特征：高性能，dev启动速度和热更新速度非常快 | 简单易用，开发者体验好
二、两大行业趋势
- 全球浏览器对原生ESM的普遍支持（目前占比92%以上）。
- 基于原生（Go、Rust）编写前端编译工具链（如Go语言编写的Esbuild、Rust编写的SWC）。
1.浏览器原生ESM支持
两大要素：
- script标签增加type=“module”属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
2.基于Esbuild的编译性能优化
Esbuild--基于Golang开发的前端工具，具备如下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
性能极高，在Vite中被深度使用
3.生产环境Tree Sharking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
自身感受
从两者的机制来看，vite要比webpack快上许多，若能熟练运用vite工具，掌握这项技能，将会给予前端开发者很大的帮助。
前端学习需要串联许多知识，此时的综合运用能力就十分重要，而这能力的前提就是掌握各种前端知识。
