一、什么是vite

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

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

Vite的主要特点包括：

快速启动：Vite 利用了浏览器原生 ES 模块的特性，在启动时只需要构建所需要的模块，而不是一次性构建整个应用，因此启动速度更快。
高效开发：Vite 支持热更新，代码修改后浏览器界面会立即响应，因此能够提高开发效率。
简洁配置：Vite 的配置比 webpack 更简洁明了，不需要复杂的配置文件，而是利用了项目中的文件名、目录结构等信息自动推导配置。
插件化：Vite 支持插件化开发，针对不同的需求可以配置不同的插件。

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

更快的开发速度：Vite 采用了浏览器原生的 ES 模块，启动速度更快，代码修改后浏览器响应更迅速，提高了开发效率。
简单的配置：Vite 的配置非常简单，不需要复杂的配置文件，而是智能推导配置。
插件化：Vite 支持插件化开发，能够根据需求配置不同的插件，提高了拓展性。
更小的打包体积：Vite 只会构建当前需要的模块，因此打包后的体积更小，提高了应用的性能。
更好的开发体验：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 - 社区生态相对不够完善

vite构建工具初识相关推荐

探究vite——新一代前端开发与构建工具（一）
Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验.它主要由两部分组成: 一个开发服务器,它基于原生 ES 模块提供了丰富 ...
前端工资涨不上去？可能是你没掌握构建工具：关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
每个前端都应该掌握构建工具大概从 2019 年到现在的这三年多的时间里,构建工具几乎已经成为前端发展最快的一个部分. 构建工具,属于前端工程化领域.而前端工程化,是每一个高级前端开发人员都必须要去深 ...
去中心化的前端构建工具 — Vite
为什么要使用Vite 在浏览器中提供ES模块之前,开发人员没有以模块化方式编写JavaScript的本机机制.这就是为什么我们都很熟悉"捆绑"的概念:使用工具来抓取.处理和连接源模 ...
vue2中，使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件 Vite 官方中文文档--https://cn.vitejs.dev/ vite-plugin-vue2包 ...
前端三大构建工具 Webpack、Vite、Rollup 优劣势及原理分析
在刚刚结束的 VueConf2021 中,除了 Vue 3.0 以外,另外一个亮点就是下一代构建工具 Vite 了. 在尤雨溪分享的[ Vue 3 生态进展和计划]的演讲中,尤大神还特意提到 Vite ...
前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
文章目录背景分类转译器打包器对比 gulp VS webpack Bundle vs Bundleless(代表就是webpack VS vite) 其他比较个人理解总结官网背景做前 ...
vite 前端构建工具
目录一.vite 简介二.vite 语法纪要三.用 vite 创建项目 1.用 vite 创建一个 react 项目 2.用 vite 创建一个 vue3 项目四.vite 和 webpack ...
Vue3 更高效的构建工具——Vite
文章目录前言一.Vite简介 1. Vite组成 2.为什么选 Vite? 二.Vite的优缺点 vite优点 vite缺点三.使用Vite创建Vue3项目 1. 创建 vite 的项目 2.项 ...
Vue的新型前端构建工具Vite怎么用
本文小编为大家详细介绍"Vue的新型前端构建工具Vite怎么用",内容详细,步骤清晰,细节处理妥当,希望这篇"Vue的新型前端构建工具Vite怎么用"文章能帮助 ...

vite构建工具初识

一、什么是vite

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

vite构建工具初识相关推荐

最新文章

热门文章