vite构建工具初识

一、什么是vite

vite官网地址：https://cn.vitejs.dev/

Vite 是一个由 Vue.js 作者尤雨溪开发的新一代前端构建工具，它相比于传统的 webpack，具有更快的启动速度、更高的开发效率和更简洁的配置方式。

Vite的主要特点包括：

1. 快速启动：Vite 利用了浏览器原生 ES 模块的特性，在启动时只需要构建所需要的模块，而不是一次性构建整个应用，因此启动速度更快。

2. 高效开发：Vite 支持热更新，代码修改后浏览器界面会立即响应，因此能够提高开发效率。

3. 简洁配置：Vite 的配置比 webpack 更简洁明了，不需要复杂的配置文件，而是利用了项目中的文件名、目录结构等信息自动推导配置。

4. 插件化：Vite 支持插件化开发，针对不同的需求可以配置不同的插件。

使用 Vite 可以为前端开发带来以下好处：

1. 更快的开发速度：Vite 采用了浏览器原生的 ES 模块，启动速度更快，代码修改后浏览器响应更迅速，提高了开发效率。

2. 简单的配置：Vite 的配置非常简单，不需要复杂的配置文件，而是智能推导配置。

3. 插件化：Vite 支持插件化开发，能够根据需求配置不同的插件，提高了拓展性。

4. 更小的打包体积：Vite 只会构建当前需要的模块，因此打包后的体积更小，提高了应用的性能。

5. 更好的开发体验：Vite 支持热更新，代码修改后浏览器界面会立即响应，提高了开发体验。

二、vite和其他构建工具对比的优劣

webpack中文官网：https://webpack.docschina.org/loaders/
rollup官网：https://rollupjs.org/
parcel官网：https://www.parceljs.cn/

构建工具	优点	缺点
Vite	- 快速启动，秒级热更新，更快的构建速度，更好的开发体验； - 支持 Vue3 和 ES modules 的原生特性，轻松实现按需加载。 - 对于单页应用和小型项目的构建效率高 - 可以快速地启动开发服务器 - 能够快速实现 SSR - 对于ESM的支持更加友好	- 对于大型项目构建效率不高 - 不支持IE11及以下浏览器
Webpack	- 功能强大、可配置性高 - 支持各类资源的处理、打包和优化 - 支持热重载和模块热替换 - 社区支持广泛、插件丰富	- 学习成本较高，配置文件繁琐，构建速度慢； - 初学者可能会遇到各种问题，需要不断深入学习和实践； - 大型项目的构建成本可能较高。 - 初次构建时间长 - 构建速度较慢
Rollup	- 构建速度快、效率高 - 生成的代码体积小 - 对代码进行静态分析和优化 - 支持Tree shaking等高级特性	- 对于需要动态加载的项目不太友好 - 配置较为复杂 - 处理HTML、CSS、图片等资源相对不太方便
Parcel	- 零配置、自动化高 - 开箱即用、易上手 - 支持多种资源的打包和优化 - 构建速度较快	- 对于一些高级需求不太友好 - 不支持Tree shaking - 社区生态相对不够完善