一、vite 简介

Vite 官方中文文档
vite.config 配置文件

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

Vite 能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 使用了 Rollup 进行生产构建，支持并兼容 Rollup 插件系统。甚至 Rollup 的维护者也推荐使用 Vite 来进行基于 Rollup 的 Web 开发。

Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

二、vite 语法纪要

vite 中文官网

三、用 vite 创建项目

据 vite 官网提供的方式，这里推荐以下两种方式：

使用 NPM：npm create vite@latest <项目名>
使用 Yarn：yarn create vite <项目名>

1、用 vite 创建一个 react 项目

我这里选用 npm 创建一个 react 项目：

npm create vite@latest vite-react-ts

然后，在出现的选项中依次选择 React–>TypeScript 即可

2、用 vite 创建一个 vue3 项目

我这里选用 npm 创建一个 vue3 项目：

npm create vite@latest vite-vue-ts

然后，在出现的选项中依次选择 Vue–>TypeScript 即可

四、vite 和 webpack 的比较

显然，vite 比 webpack 启动的更快。

为什么 Vite 启动快？

从底层语言来说：Vite 是用 go 语言实现的，go 语言是纳秒级别；webpack 使用 js 实现的，js 是毫秒级别。所以 vite 比 webpack 打包器快 10-100 倍。
- Vite 是基于 esbuild 预构建依赖。而 esbuild 是采用 go 语言编写，go 语言的是纳秒级别的。
- Webpack 是基于 nodejs 构建，js 是以毫秒计数。
从打包过程来说：vite 启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite 可按需动态编译缩减时间。当项目越复杂、模块越多的情况下，vite 明显优于 webpack。
- Vite 打包：启动服务器 => 请求模块时按需动态编译显示。（vite 遵循的是 ES Modlues 模块规范来执行代码，不需要打包编译成 es5 模块即可在浏览器运行。）
- Webpack 打包：分析各个模块之间的依赖 => 然后进行编译打 => 打包后的代码在本地服务器渲染。（随着模块增多，打包的体积变大，造成热更新速度变慢。）

综上所述，vite 从性能上看，完胜 webpack，webpack 一家独大的时代要一去不复返了啊。

【参考】
vue3 使用 vite
Vite 官方中文文档
Pug support

【推荐】
vite.config 配置文件
深入理解Vite核心原理

使用了 vite 的开源项目：
vue-vben-admin - 完整版
vue-vben-admin-thin-next - 简化版

vite 前端构建工具相关推荐

vue2中，使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件 Vite 官方中文文档--https://cn.vitejs.dev/ vite-plugin-vue2包 ...
Vue的新型前端构建工具Vite怎么用
本文小编为大家详细介绍"Vue的新型前端构建工具Vite怎么用",内容详细,步骤清晰,细节处理妥当,希望这篇"Vue的新型前端构建工具Vite怎么用"文章能帮助 ...
三大前端构建工具横评，谁是性能之王！
点击上方"蓝色字体",选择"设为星标" 做积极向上的前端人! Vite一经发布就吸引了很多人的关注,NPM下载量一路攀升: 而在Vite之前,还有Snowpac ...
55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
npm run buil构建后页面白屏_从Npm Script到Webpack，6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
前端构建工具gulpjs的使用介绍及技巧（转）
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
[转]前端构建工具gulpjs的使用介绍及技巧
本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

vite 前端构建工具

目录