前端面试十四之webpack和vite有什么区别

在前端中,构建工具的选择往往决定了开发体验和效率。webpack和vite是两种广泛使用的构建工具。对比图:

Webpack 是"先打包再运行",Vite 是"先运行再按需编译"。

1. 开发阶段:冷启动 + HMR 速度

指标 Webpack 5 Vite 5
冷启动 3--10 s(全量打包) 50--300 ms(只启动服务器)
HMR 500 ms--2 s(重新走依赖图) 10--100 ms(只重新请求单个 ESM)
原理 把所有模块揉成 bundle 后丢给浏览器 把源码当原生 ESM,浏览器按需去拉;改哪拉哪

2. 生产阶段:打包器与产物

维度 Webpack Vite
打包器 自身 Rollup(插件兼容 Rollup 生态)
代码分割 手动 splitChunks 调优 默认 Rollup 多入口 + 动态 import
构建时间 60--180 s(大项目) 20--60 s(同项目实测)
产物体积 经深度调优可最小 默认 Tree-shaking 干净,手动调优空间小

3. 配置与生态

维度 Webpack Vite
配置文件 动辄 200--500 行 多数项目 20--50 行搞定
插件数量 7000+(稳定、成熟) 1000+(增长快,但企业级插件仍少)
特殊需求 Module Federation、微前端、DLL、Worker -loader 等 官方或社区插件逐步补齐,部分需自己封装

4. 选型速断

Vite

  • 新代码、Vue/React/Svelte、现代浏览器、追求"秒开"体验

  • 中小型项目、组件库、可视化大屏、低代码平台

Webpack

  • 需要 IE11、微前端、Module Federation、深度分包优化

  • 存量巨型项目(迁移成本 > 收益)

  • 企业级定制流程(私有插件、多套构建策略)

相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
小白用python3 小时前
win10安装nodejs及better-sqlite3失败的解决方案
node.js·better-sqlite3
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan5 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js