Vite
vite 学习总结
前言
前端工程的痛点：
- 前端的模块化需求：前端的模块标准非常多，包括 ESM、CommonJS、AMD 和 CMD 等等。前端工程一方面需要落实这些模块规范，保证模块正常加载。另一方面需要兼容不同的模块规范，以适应不同的执行环境
- 浏览器兼容、转译高级语法：由于浏览器实现规范的限制，还有不同浏览器版本语法兼容不同等原因，高级语法（ts、jsx、新es语法）等需要在浏览器运行，就得转译成浏览器可识别的形式。这个需要在工程编译层面支持
- 线上代码质量：与开发环境不同，在生产环境中，不仅需要考虑代码的兼容性、安全性，还需要考虑代码运行时的性能问题等
- 开发效率问题：项目的冷启动/二次启动、热更新时间，都会影响开发效率，尤其是项目越来越大的时候
而目前社区已有的，例如：webpack、rollup、parcel 等，都能解决上面的问题：
- 模块化方面，提供模块加载方案，并兼容不同的模块规范
- 语法转译方面，配合
Sass、Babel等前端工具链，对高级语法进行转译，同时对于静态资源也能进行处理，使之能作为一个模块正常加载 - 产物质量方面，在生产环境中，配合
Terser等压缩工具进行代码压缩和混淆，通过Tree Shaking删除未使用的代码，提供对于低版本浏览器的语法降级处理等 - 开发效率方面，使用缓存、多线程等方式
而 Vite 的优势：兼具了以上的能力，并且做到更高效
- 一方面，vite 在开发阶段基于浏览器原生 ESM 的支持实现了
no-bundle服务， - 另一方面，构建阶段，借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译
基于以上两点，vite 能将项目的启动性能提升一个量级，并且达到毫秒级的瞬间热更新效果
其它方面的能力：
- 模块化方面，vite 基于浏览器原生的 ESM 支持实现模块加载，并且无论是在开发还是生产环境，都可以将其它格式的产物(如 CommonJS)转换为 ESM
- 语法转译方面，vite 内置了对 ts、jsx 等高级语法的支持，也能加载各种静态资源，例如图片等
- 产物质量方面，vite 基于 rollup 实现生产环境打包，同时可以配合
Terser、Babel等工具链，可以极大程度保证构建产物的质量
快速创建 vite 项目
通过命令行，快速创建 vite 项目，这里使用 pnpm 进行方式管理包
执行以下命令：
pnpm create vite执行完这个命令，pnpm 会先下载 create-vite 这个包，然后执行这个包的项目初始化逻辑，如下：
基本步骤就是：
- 输入项目名称
- 选择框架（react、vue 等）
- 选择开发语言（js、ts 等）
创建完毕，进入项目，安装依赖，执行 pnpm run dev 即可启动项目
