前端面试十四之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、深度分包优化

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

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

相关推荐
guslegend2 小时前
Webpack5 第五节
webpack
特立独行的猫a3 小时前
JSNES游戏模拟器在 Node.js 环境下的测试使用及高清显示优化
游戏·node.js·nes·jsnes
rggrgerj3 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
golang学习记4 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5204 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽5 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn5 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk5 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y6 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件