Vue基础教程（162）精通Vue CLI和Vite之Vue 3.0新增开发构建工具——Vite：光速开发真香！Vue 3.0的超级武器Vite，让你告别打包等待

最新推荐文章于 2025-11-24 03:21:24 发布

原创

最新推荐文章于 2025-11-24 03:21:24 发布 · 999 阅读

CC 4.0 BY-SA版权

文章标签：

记得那些年，我们守着Webpack等打包的日子吗？

作为Vue老司机，你一定经历过这样的场景：早上来到工位，打开Vue项目，npm run serve，然后——去接杯咖啡，和同事聊会天，回来可能还在编译中。特别是当项目越来越大，等个三五分钟简直是家常便饭。

我曾经有个项目，光启动就要2分钟，热更新也要10多秒。那段时间，我养成了极简编码风格——不是因为我崇尚简洁，而是因为我不敢随便保存，每次保存就要开启一段漫长的等待。

这就是Vite要解决的核心痛点。

Vite（法语意为“快速”，发音/vit/）是Vue作者尤雨溪专门为Vue 3.0打造的新型构建工具。它到底有多快？这么说吧，我第一次使用时，原本需要30秒启动的项目，现在不到1秒就完成了。那种感觉，就像开惯了拖拉机突然换上了跑车。

传统打包工具如Webpack需要先打包所有代码再启动开发服务器。而Vite利用了浏览器的原生ES模块支持，直接按需提供源码。

简单来说：

// 传统方式需要打包整个lodash
import _ from 'lodash'

// Vite方式，只引入需要的部分（当然，Vite会自动优化）
import debounce from 'lodash/debounce'

Vite不是傻傻地什么都不打包。它用esbuild（用Go编写，比JavaScript快10-100倍）对依赖进行预构建，将CommonJS/UMD模块转换为ESM。

// Vite在背后默默做的事情：
// 将这种CommonJS模块
const React = require('react')

// 转换成这种ESM格式
import React from '/@modules/react.js'

基于ESM的HMR（热模块替换），只更新修改的模块，不需要重新打包整个应用。