17370845950

模块打包是将分散的JS、CSS、图片等资源按依赖关系整合为浏览器可运行文件的过程；它分析import/export构建依赖图，转换非JS资源，支持开发热更新与生产优化。Webpack先全量打包再运行，启动慢但生态成熟；Vite开发时不预打包，按需编译，启动快、热更快，生产用Rollup优化。新项目推荐Vite，老项目或需兼容旧浏览器则选Webpack。

模块打包，简单说就是把项目里分散的 JavaScript 文件（还有 CSS、图片、字体等）按依赖关系整理好，合并或组织成浏览器能直接运行的文件。它解决的是“代码怎么分、怎么连、怎么传给浏览器”的问题。

模块打包的核心目的

现代前端项目通常由成百上千个模块组成，比如一个按钮组件依赖工具函数，工具函数又依赖网络请求库。浏览器原生不理解这种层层 import 的写法，也不支持直接加载 .vue 或 .scss 文件。模块打包工具就负责：

• 分析所有 import/export 关系，画出完整的依赖图
• 把非 JS 资源（如 CSS、图片）转成 JS 可处理的形式或内联/链接方式
• 在开发时提供实时编译和热更新能力
• 在生产时压缩代码、拆分包、剔除无用代码（tree-shaking），提升加载性能

Webpack：先打包，再运行

Webpack 是“传统打包器”的代表。它启动开发服务器前，必须先把整个项目从入口开始递归解析，构建完整依赖图，再打包成 bundle（比如 main.js、vendor.css）。这个过程决定了它的特点：

• 开发启动慢：项目越大，首次打包越久；改一行代码，HMR 也可能要重跑依赖链
• 配置灵活但繁琐：处理 CSS 需 css-loader + style-loader，处理图片要 file-loader 或 url-loader，每类资源都要手动配 loader
• 生态成熟：插件极多，适合老项目、需要深度定制（如微前端、多环境构建）、兼容旧浏览器的场景
• 生产构建稳定：支持 code splitting、dynamic import、scope hoisting 等高级优化

Vite：不打包，只响应请求

Vite 把“开发”和“生产”彻底分开。它利用现代浏览器原生支持 ES 模块（import）的特性，开发时不做预打包：

• 启动秒开：服务一跑起来就能访问，浏览器请求哪个模块，Vite 就即时编译哪个（比如 .vue → JS ESM）
• 热更新极快：改一个组件，只重新编译它自己，不牵连父组件或公共库
• 开箱即用：CSS、JSON、静态资源默认支持，无需配置 loader；.ts、.jsx、.vue 都有内置转换
• 生产用 Rollup：生成更小、更干净的包，tree-shaking 效果通常优于 Webpack 默认配置

选哪个，看实际需求

新项目、主流框架（Vue/React/Svelte）、面向现代浏览器，Vite 是默认推荐——快、轻、省心。已有大型 Webpack 项目、需兼容 IE、或依赖大量 Webpack 专有插件（如某些 CMS 构建流程），继续用 Webpack 更稳妥。两者不是替代关系，而是分工演进：Vite 解决开发体验瓶颈，Webpack 守住复杂工程控制力。