一、核心对比Vite 与 Webpack 本质差异Webpack先全量打包再启动服务项目越大冷启动越慢 Vite基于浏览器原生 ES Module esbuild 预构建启动时不打包全部代码按需加载启动秒开。二、开发环境vite dev核心原理最重点1. 利用浏览器原生 ES Module 能力浏览器支持直接识别import/export只要文件路径正确就能直接发起请求加载模块。 Vite 开发服务器不做全量打包而是作为中间服务拦截浏览器的模块请求实时转换后返回。2. esbuild 预构建依赖解决第三方包问题问题第三方库大多是 CommonJS 格式require/module.exports浏览器不识别 CJS无法直接 ESM 加载且大量零散文件会产生过多网络请求。处理流程启动时用 Go 编写的高速工具esbuild一次性把所有node_modules依赖打包成单个 ESM 文件输出到node_modules/.vite/deps缓存目录浏览器后续导入依赖直接请求预构建好的单文件减少请求数量、同时转 CJS → ESM。esbuild 性能远快于 JS 写的打包工具预构建速度极快。3. 源码按需实时转换单文件编译业务源码Vue/TS/JSX/SCSS不会提前打包浏览器请求哪个文件Vite 才实时转换对应文件浏览器请求src/App.vueVite 服务拦截请求调用插件vitejs/plugin-vue单文件编译Vue拆分为 template、script、style分别转成 JS/CSSTS/JSXesbuild 实时转成浏览器可识别 JS样式预处理器转 CSS内联或单独返回转换完成后把编译结果返回浏览器浏览器执行。4. 极速热更新 HMR不刷新整页只精准更新修改的模块基于依赖图只重新编译变更文件不牵连其他模块通过 WebSocket 推送变更保留组件状态更新毫秒级。5. 路径重写识别/xxx别名自动映射为真实文件路径处理静态资源、JSON、图片等资源导入返回正确资源 URL。三、生产环境vite build构建原理开发模式只适合本地调试生产环境需要打包合并文件Vite 此时切换为Rollup做打包Rollup 基于 ESM 静态分析Tree-Shaking 能力优秀自动剔除未使用代码分块打包第三方依赖单独分包vendor利用浏览器缓存页面 / 组件代码按路由动态分割实现按需加载内置资源处理压缩 JS/CSS、图片转 base64 / 输出文件、CSS 提取、代码混淆输出标准静态资源可直接部署到 CDN。四、整体流程总结开发环境流程启动服务 → esbuild 预构建第三方依赖CJS 转 ESM缓存打开页面浏览器请求入口index.htmlHTML 里的import触发模块请求Vite 服务按需单文件编译源码实时返回转换后的 ESM文件修改 → HMR 精准局部更新。生产构建流程执行vite build→ 使用 Rollup 完整打包、Tree-Shaking、资源压缩、代码分割 → 输出dist静态目录。五、核心优势底层原因启动快抛弃全量打包只预构建依赖业务代码按需加载更新快HMR 只编译变更模块无冗余打包构建快预构建用 Go 写的 esbuild生产打包 Rollup 高效 Tree-Shaking原生标准依托浏览器 ESM 规范不用复杂模块兼容层。六、补充短板开发环境依赖浏览器 ESM旧浏览器不兼容生产打包后无问题极多依赖的大型项目首次预构建依赖耗时会小幅上升生产打包依赖 Rollup相比 esbuild 纯打包速度略慢。七、Webpack 核心定位是基于 JS 实现的静态模块打包工具不依赖浏览器原生 ESM统一把所有资源JS/TS/Vue/CSS/ 图片 / 字体解析为模块打包成浏览器可识别的 JS 文件。核心逻辑先全量打包再启动开发服务。八、五大核心概念底层基础Entry 入口打包起点从入口文件递归遍历所有导入依赖构建完整依赖图。Output 输出定义打包后文件输出路径、文件名。Loader 加载器Webpack 仅能识别 JS/JSON其他文件靠 Loader 转换babel-loaderTS/JSX 转 ES5vue-loader解析 Vue 单文件组件css-loader/style-loader处理样式file-loader图片、字体资源处理Plugin 插件在打包全生命周期钩子执行扩展逻辑HtmlWebpackPlugin、MiniCssExtractPlugin、CleanWebpackPlugin等。Mode 模式development /production自动开启压缩、Tree-Shaking 等优化。九、开发环境 webpack-dev-server 原理启动流程执行npm run dev→ Webpack 一次性全量编译所有模块生成内存打包产物 启动本地服务读取内存中的 bundle 返回浏览器。项目越大初始打包耗时越长冷启动慢。模块处理逻辑全部代码提前打包进一个 / 多个 bundle浏览器只请求打包后的文件无按需编译。热更新 HMR文件变更后重新执行部分打包流程生成更新补丁替换模块 需要重新走编译流程大型项目更新卡顿明显。模块兼容处理内部实现一套自定义模块运行时webpack runtime统一兼容ESM / CommonJS / AMD不依赖浏览器原生模块能力。十、生产环境 webpack build 原理完整遍历依赖图递归打包所有资源执行 Tree-Shaking仅 production 模式删除未引用代码代码分割 splitChunks拆分业务代码、第三方依赖、runtime 代码Loader 编译资源 Plugin 压缩、提取 CSS、生成 HTML、清理目录输出磁盘dist文件夹。十一、完整打包流程读取webpack.config.js配置从 entry 入口开始递归解析所有import/require构建依赖图 Dependency Graph对每个模块匹配对应 Loader 转换为标准 JS调用插件各生命周期钩子处理资源合并模块、注入 runtime 运行时代码输出打包后的 bundle 文件到 output 目录。十二、Webpack vs Vite 核心对比表格维度WebpackVite开发启动全量打包后启动大项目冷启动极慢仅预构建依赖业务代码浏览器按需加载秒开模块标准自研 runtime兼容所有模块规范不依赖浏览器 ESM开发环境依托浏览器原生 ESM编译工具全部 Loader 基于 JS转换速度慢预构建用 Go 语言 esbuild编译速度数十倍提升HMR 更新修改文件后重新打包部分模块大型项目卡顿精准单文件编译毫秒级更新生产打包Webpack 自身打包Tree-Shaking 较弱基于 Rollup 打包Tree-Shaking 更完善依赖处理启动时全部打包依赖启动一次性预构建依赖并缓存后续复用十三、Webpack 核心缺点Vite 解决的痛点冷启动慢无论是否用到全部代码提前打包更新慢文件改动需要重新走打包流程JS 实现转换工具TS/JSX 编译性能远不如 esbuild庞大的打包产物开发时所有模块一次性加载。十四、一句话总结Webpack 是全量预打包模型先把整个项目所有资源编译合并再提供给浏览器 Vite 是按需加载模型利用浏览器原生 ESM仅提前处理第三方依赖业务代码浏览器请求时才实时编译。