1) 入口与模块图：把项目“地图”画出来

功能： 告诉工具“从哪儿开始找代码”，再顺着每个文件里的 import/require() 把所有会用到的文件串成一张网（依赖图）。 直觉类比： 从首页（入口）出发，顺着“超链接”（import）把整站爬一遍，得到网站地图。 Vite：

  • Dev：浏览器请求哪个模块，就现查现用地把它和它的依赖挂到图上。
  • Build：交给 Rollup 从入口把整张图一次走完。 Webpack：
  • 不分 Dev/Prod，都是先把整张图建好再工作。 常用配置：
  • Vite：resolve.alias、build.rollupOptions.input
  • Webpack：entry、resolve.alias、resolve.extensions、resolve.mainFields

2) 模块解析与格式兼容：不同“口味”的文件都能吃

功能： 让 ESM、CommonJS、CSS、图片、JSON… 这些不同格式都能作为“模块”被导入。 直觉类比： 餐厅后厨收菜，有中餐配料、西餐配料、饮料、甜点——都要能接收并分门别类。 Vite： Dev 期用原生 ESM；遇到 CJS 用 esbuild 转成 ESM；CSS/图片会被转成“虚拟模块”。 Webpack： 用 loader 把各种格式变成 JS 能理解的模块；静态资源用 asset/* 类型统一管理。 配置抓手：

  • Vite：多数开箱即用；特殊包用 optimizeDeps.include/exclude。
  • Webpack：module.rules（css-loader/file-loader 等已被 asset 取代）、type:'asset/resource|inline|source'。

3) 源码转换（TS/JSX/ESNext）：把“新语法”变成“大家都懂的”

功能： 把 TS、JSX、以及浏览器还不完全支持的新 JS 语法，变成兼容目标环境的普通 JS。 直觉类比： 把方言翻译成普通话；再按不同城市口音做点适配。 Vite： Dev 用 esbuild 快速转；Build 用 Rollup 插件链 + esbuild；必要时再上 Babel。 Webpack： 常用 swc-loader / esbuild-loader（快）或 ts-loader + babel-loader（灵活）。 配置抓手：

  • Vite：esbuild.target、@vitejs/plugin-react/-vue。
  • Webpack：module.rules 里接对应 loader；目标环境通过 Babel/SWC 配置或 target。

4) 代码分割：该拆就拆，别一次塞完

功能： 把代码拆成若干 chunk；首屏先下关键的，其他页面或功能再按需加载。 直觉类比： 搬家别一次搬完全部家具，先把床和锅搬过去能住就行，其他慢慢运。 Vite（Rollup）： 遇到 import() 自动拆；可用 output.manualChunks 把第三方库/路由块分组。 Webpack： import() 变异步块；optimization.splitChunks 把公共依赖抽出来；runtimeChunk 拆运行时。 常见坑： 拆得太碎 → 请求多；拆得太粗 → 首屏肥。 配置抓手：

  • Vite：build.rollupOptions.output.manualChunks
  • Webpack：optimization.splitChunks、optimization.runtimeChunk

5) Tree Shaking：把没用到的函数“抖掉”

功能： 删除没有被引用的导出和死代码，减小体积。 直觉类比： 行李只带穿的衣服，压缩包里把没穿的都拿掉。 Vite： Rollup 基于 静态 ESM 天然能摇树，要注意包的 sideEffects 标注。 Webpack： usedExports + sideEffects + 压缩器 DCE 一起配合。 关键点： 第三方包要写 "sideEffects": false（或列出有副作用的文件），否则工具不敢删。

6) 压缩 + 作用域提升：把包尽量“压瘪”

功能： 压缩空格注释、缩短变量名；把多个小函数“内联”到一个作用域，进一步省体积。 直觉类比： 把衣服抽真空打包，能塞更小的行李箱。 Vite： 默认用 esbuild/terser 压缩；Rollup 自带激进 hoist。 Webpack： TerserPlugin / swcMinify / esbuildMinify；optimization.concatenateModules: true。 抓手：

  • Prod 必开压缩；若构建慢，可试 swc/esbuild 压缩器加速。

7) CSS 管线：样式也要编译、抽取、瘦身

功能： 支持 Sass/Less，跑 PostCSS（自动补前缀等），生产把 CSS 抽成独立文件并压缩。 直觉类比： 把布料（Sass）裁剪成衣服（CSS），最后折叠打包单独装袋。 Vite： 内置预处理、PostCSS；cssCodeSplit 控制是否按 chunk 拆 CSS。 Webpack： Dev 用 style-loader 直接插 <style>；Prod 用 MiniCssExtractPlugin 抽出 .css，再用 css-minimizer 压缩。 抓手： Tailwind/UnoCSS 这类原子化框架构建期会扫描类名，别忘了开启缓存。

8) 资源与哈希：文件要“可缓存又不串台”

功能： 小文件直接内联成 base64；大文件复制到输出目录并在文件名里带 contenthash，方便 CDN 长缓存。 直觉类比： 零食（小文件）直接放口袋；大家电（大文件）单独打包并标注“按内容生成的编号”。 Vite： assetsInlineLimit、产物默认带 hash。 Webpack： type:'asset' 系列统一；output.filename: [name].[contenthash].js。 关键点： “contenthash”基于内容，改一处不至于让所有文件名都变。

9) HTML 注入与启动：自动把产物挂到页面

功能： 把打包出来的 <script>/<link> 自己插到 HTML 里，顺便加预加载标签。 直觉类比： 菜做好了，自动摆盘上桌。 Vite： index.html 就是配置入口；自动注入入口脚本与关键 preload；import.meta.env 注环境变量。 Webpack： 用 html-webpack-plugin 读取模板并把资源注进去；需要时配 preload/prefetch 插件。 抓手： 多页面应用（MPA）就配多个入口/多个 HTML 插件实例。

10) Dev Server 与 HMR：改一行，页面“秒变”

功能： 起本地服务器、反向代理、支持热更新（只替换改动的模块，不整页刷新）。 直觉类比： 裁缝给你改衣服，改袖子不用让你把整套衣服脱下来。 Vite： 基于 ESM 的模块级热替换，**依赖预构建（esbuild）**把 node_modules 先“熬一锅”。 Webpack： webpack-dev-server + Runtime 补丁；图上只重建受影响的模块。 抓手： HMR 不稳的模块可先降级成整页刷新，先稳后快。

11) 缓存、并行与增量：速度来自“别重复干活”

功能： 把中间结果落盘、任务多进程并行、只重建受影响的那一小撮文件。 直觉类比： 裁缝把常用版型留底（缓存），多人同时干活（并行），衣服改口袋不必重做衣领（增量）。 Vite： .vite 目录缓存预构建与转换；Rollup/Esbuild 自带并行。 Webpack： cache:{ type:'filesystem' }、thread-loader、parallel、experiments.lazyCompilation。 抓手： 大仓项目开启文件系统缓存可以直接砍掉二次构建大半时间。

12) Source Map：线上出错也能看懂

功能： 让压缩后的代码能“对回去”原始源码，定位 Bug；生产可用隐藏 map配合错误上报。 直觉类比： 城市地铁图（压缩产物）配一张“对照表”（map），告诉你真实街道名（源码）。 Vite： build.sourcemap: true|'hidden'|'inline'（生产推荐 hidden）。 Webpack： devtool：开发常用 cheap-module-source-map，生产 hidden-source-map。 抓手： 别把完整 map 直接公开在生产站点；交给 Sentry 等平台私有存储。

可选项（按需添加的一揽子）

  • 手工分包策略：Vite manualChunks / Webpack splitChunks.cacheGroups 精细切 vendor/路由块。
  • 图片优化自动化：Vite vite-imagetools；Webpack image-minimizer-webpack-plugin。
  • 预加载/预取精调：按路由/关键路径加 <link rel="preload/prefetch">。
  • 旧浏览器兼容：Vite @vitejs/plugin-legacy；Webpack 降 targets + polyfill。
  • 模块联邦（微前端）：Vite 社区插件；Webpack Module Federation。
  • SSR/SSG 同构：Vite 配 ssr 或直接用 Nuxt/SvelteKit 等；Webpack 走 target:'node' + externals。
  • PWA/Service Worker：Vite vite-plugin-pwa；Webpack workbox-webpack-plugin。
  • 类型检查 / ESLint 并入构建：Vite vite-plugin-checker；Webpack fork-ts-checker-webpack-plugin。
  • 体积分析与 CI 守门：rollup-plugin-visualizer / webpack-bundle-analyzer + 体积阈值。
  • 哈希稳定性细化：Webpack moduleIds/chunkIds: 'deterministic'；合理固定 vendor 边界。
  • 安全工艺：依赖审计、SRI、生产 Source Map 私有化。
  • i18n 构建期优化：提取文案、按语言分包。

一句话总括

  • 把 12 步当“主干线”先跑通：能编译、能分包、能热更、能缓存、能定位错误。
  • 有了瓶颈再从“可选项”里点菜：是首屏慢？体积大？冷启动慢？针对性加一两项就行。