这是我参与「第五届青训营 」笔记创作活动的第8天。
背景
现在有很多前端构建工具，有：gulp、grunt、webpack、rollup等等。现在多了一个vite。然而vite是一个很快速的构建工具。
Vite简介
什么是vite
Vite是一个由原生ES Module驱动的Web开发前端构建工具
vite的特性
- 极速的服务启动：使用原生ESM文件，无需打包
- 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载
- 丰富的功能：对很多功能都是开箱即用的
- 优化构建：可选“多页应用”或者“库”的预配置Rollup构建
- 通用的插件：在开发和构建之间共享Rollup-superset插件接口
- 完全类型化的API：灵活的API和完整TypeScript类型
Vite 的优势
- 上手非常简单
- 开发效率极高
- 社区成本低（兼容绝大部分 rollup 插件）
开发效率极高
总结（vite和webpack的区别）
Vite 优势：
vite 开发服务器启动速度比 webpack 快 webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。 vite 热更新比 webpack 快 在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。 vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
Vite 劣势：
生态不及webpack，加载器、插件不够丰富 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
