Vite是什么？
Vite是一个前端构建工具，传统的前端构建工具有Webpack、Rollup、Parcel，也有现代的Esbuild、Vite等。不仅仅种类繁多。并且更新也很快。
前端工程的痛点
-
模块化需求：业界的模块化标准非常的多。包括ESM、CommonJS、AMD和CMD等等。前端工程一方面需要落实这些模块规范。保证模块正常加载。另外一方面需要兼容不同的模块规范。以适应不同的环境。
-
兼容浏览器，编译高级语法：由于浏览器实现规范所限制，只要使用高级语法(Typescript、JSX等)想要在浏览器中正常运行，就必须被转化成浏览器可以理解的形式。这都是需要工具层面的支持。所以这个需求会一直存在。
-
线上代码质量的问题：可开发阶段考虑的侧重点不同。生产环境中，我们不仅要考虑代码的安全性、兼容性问题。保证线上代码的正常运行，也需要考虑代码运行时候的性能问题。由于浏览器的版本众多。代码兼容性和安全策略各不相同。线上代码的质量问题也将是前端工程中长期存在的一个痛点。
-
开发效率问题：我们知道，项目的冷启动/二次启动时间。热更新时间都可能严重的影响开发效率。尤其是当项目越来越大的时候。因此，提高项目的启动速度和热更新速度也是前端工程的重要需求。
前端工具通过以下方式解决上述痛点难点
- 模块化方案：提供模块加载方案、兼容不同模块规范
- 语法转译：高级语法转译，比如Saas、TypeScript，资源加载：图片、字体、worker。
- 产物质量：产物压缩、代码混淆、Tree Shaking、语法降级
- 开发效率：HMR、构建提速
为什么不使用Webpack
一般的项目使用Webpack之后，启动花个几分钟都是很常见的事情。热更新经常也要等待10秒以上。这主要是因为：
- 项目冷启动必须递归打包整个项目的依赖树
- JavaScript语言本身的性能限制，导致构建性能遇到瓶颈，直接影响开发效率。
如何学好Vite
即使你通过资料学完了Vite的相关知识，因为对Vite的生态不够了解，遇到实际的问题的时候依然不知道使用哪些插件或者解决方案。
- 第三方库里面含有CommonJS的代码导致报错了怎么办？
- 想在开发过程中进行Eslint代码规范检查怎么办？
- 生产环境打包项目后，如何产出构建产物分析报告
- 如果要兼容不支持原生ESM的浏览器，怎么办？
而且，如果你对Vite底层使用的引擎Esbuild和Rollup不够熟悉，遇到一些需要定制的场景，往往也会出问题。
- 写一个Esbliud插件来处理一下问题依赖
- 对Rollup打包产物进行自定义拆包，解决实际场景中经常出现的循环依赖问题
- 使用Esbuild的代码转译和压缩功能会出现哪些兼容性问题？如何解决？
