2. Vite —— 现代新秀#简介：2020 年由尤雨溪（Vue 作者）开发，现代前端开发的新标准。

核心理念：利用浏览器原生 ES modules，开发时极速，生产时用 Rollup 优化。

Vite 的巧妙之处：

开发时：

浏览器要什么，我就给什么

↓

请求 App.vue → 实时编译返回 → 浏览器加载

请求 utils.js → 直接返回 → 浏览器加载

（因为浏览器原生支持 ES modules）

↓

启动快、热更新快

生产时：

用 Rollup 打包优化

↓

Tree Shaking、压缩、分割代码

为什么 Vite 这么快？

Webpack 在开发时：需要全量打包一遍代码，改一个文件就重新打包一遍。

Vite 在开发时：浏览器直接请求模块，Vite 只需要实时转换请求的文件。改一个文件只需转换那一个。

Vite 的优点：

开发体验极好，启动快、热更新快配置简单，几乎零配置现代浏览器支持好生产环境使用 Rollup，产物优化好Vite 的缺点：

只支持现代浏览器（需要 ES6 支持）生态相对年轻（但发展很快）某些复杂场景可能还不够成熟适用场景：

新项目（推荐首选）需要快速开发体验的项目Vue 3、React 等现代框架项目基础配置示例：

// vite.config.js

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

export default defineConfig({

plugins: [react()],

server: {

port: 3000

},

build: {

outDir: 'dist'

}

})

几乎就这么简单！