Webpack还是Vite？前段时间尤大在Vue 3.0 beta直播中提到了一个vite的工具，其描述是：针对Vue单

前段时间尤大在Vue 3.0 beta直播中提到了一个vite的工具，其描述是：针对Vue单页面组件的无打包开发服务器，可以直接在浏览器运行请求的vue文件，对其原理比较感兴趣，因此体验并写下了本文，主要包括vite实现原理分析和一些思考。

早期 Webpack 刚出来的时候，是为了解决低版本浏览器不支持 ESM 模块化的问题，将各个分散的 Java 模块合并成一个文件，同时将多个 Java 脚本文件合并成一个文件，减少 HTTP 请求的数量，有助于提升页面首次访问的速度。后期 Webpack 乘胜追击，引入了 Loader、Plugin 机制，提供了各种构建相关的能力（babel转义、css合并、代码压缩），取代了同期的 Browserify、Gulp。

如今，HTTP/2 的盛行，HTTP/3 也即将发行，再加上 5G 网络的商用，减少 HTTP 请求数量起到的作用已经微乎其微，而且新版的浏览器基本已经支持了 ESM（ < module> ）。

Java modules 上手 vite

vite 带着它的历史使命随之出现。由于省略了打包的过程，首次启动 vite 的时候可谓秒开，完全无需等待就能进入开发。

想要尝试 vite ，可以直接通过如下命令

npm init @vitejs/app

yarn create @vitejs/app

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts

目前 vite 都是和 vue 3 搭配使用，如果要在 vue 2 使用 vite 估计还得等正式版发布。当然，能上 vue 3 还是上 vue 3 吧，无论性能、包大小还有 ts 加持方面，vue 3 都远优于 vue 2 。除了 vue，vite 还提供了 react、preat 相关的模板

生成的 vue 项目的目录结构如下

项目的入口为 index.html ，html 文件中直接使用了浏览器原生的 ESM（ type="module" ） 能力。关于浏览器 ESM 能力的介绍，可以阅读我之前的文章《前端模块化的今生》。

< type= "module"src= "/src/main.js"> </ >

所有的 js 文件经过 vite 处理后，其 import 的模块路径都会被修改，在前面加上 /@modules/ 。当浏览器请求 import 模块的时候，vite 会在 node_modules 中找到对应的文件进行返回。

import{ createApp } from'vue'
import App from './App.vue'

import './index.css'

createApp(App).mount( '#app')

请求

这样就省略了打包的过程，大大提升了开发效率。当然 vite 也提供了生产模式，利用 Rollup 进行构建。

总结

vite 刚刚发布的时候，还只能做 vue 的配套工具使用，现在已经支持了 JSX、Type、Web Assembly、PostCSS 等等一系列能力。到底能不能革了 webpack 的命，就看天意了

对了，vite 和 vue 一样，来自法语，中文是「快」的意思

免费面试题：web前端开发工程师（vue）