构建工具配置读取以 Vite 为例工具会自动查找项目根目录vite.config.js读取入口文件、输出目录、打包策略、公共路径等核心打包规则。环境变量读取构建工具会解析命令行传入参数比如--mode production再按照优先级读取.env、.env.production等环境文件将所有变量统一挂载到process.env让业务代码可以区分开发、测试、线上环境逻辑。插件配置读取完基础配置后工具会依次调用各个插件的config或configResolved钩子。这意味着你的配置在此时可能会被插件“篡改”。此时的配置才是最终用来执行的配置。准备开始在真正开始模块编译之前构建工具通常会执行一些准备工作为后续构建做铺垫。删除旧有构建包可选为了防止上一次打包的“历史遗留文件”污染本次产物比如你删除了某个页面但旧的 JS 还在 dist 里构建工具的第一步通常是清空dist目录。复制公用文件夹有一些文件不需要经过编译过程会被直接原样复制到产物文件夹中。例如robots.txt、favicon.ico、crossdomain.xml等静态资源文件。这些文件在构建过程中不会被编译转换因此会在构建开始时就直接复制到输出目录下。HTML 入口分析前端项目通常以 HTML 文件作为入口构建工具会对 HTML 进行分析和处理。入口配置读取读取配置中指定的页面入口绝大多数单页应用默认以根目录index.html作为唯一打包入口。插件处理 HTMLHTML 会经过插件批量加工压缩空格注释、注入脚本标签、插入统计埋点、替换环境变量、CDN 地址替换、自动加入UTF-8标志、自动添加兼容 meta 标签等。解析 HTML 内容构建工具深度解析 HTML提取页面所有资源地址、JS 主入口脚本地址。打包完成后所有源码相对路径都会自动替换为打包后的带 hash 产物路径保证浏览器正常寻址加载。模块构建项目 JS 业务核心会按照固定链路递归处理所有模块路径解析 → 模块加载 → 模块转换 → 分析模块依赖 → 循环路径解析按条件加载上述步骤用不同的浏览器兼容性配置运行多次生产不同浏览器兼容性的多份产物最终在入口 HTML中构建工具生成的代码会根据当前浏览器情况加载不同的产物 JS。路径解析路径解析Module Resolution是构建工具找到import ./foo或import React from react对应磁盘文件的过程。它决定了你的代码能找到谁。常用规则把/路径自动映射补全为项目src源码目录裸模块名自动去node_modules查询 NPM 第三方包自动补全省略后缀.js、.ts、.vue、.json等扩展名目录引入自动查找index入口文件别名、绝对路径、CDN 远程路径等其他规则模块加载拿到绝对路径后就要把文件内容读进内存了。默认情况下直接通过 Node.js fs 模块读取本地源码文件内容。Rollup 中还可以通过load钩子自定义模块加载过程。可以用来实现虚拟模块又或者是远程加载。模块转化拿到模块的原始内容后构建工具会根据模块类型进行相应的转换处理。常见的转换包括不同类型文件的转换特殊类型文件如.json、.ts、.jsx等转标准es。环境变量注入例如process.env.NODE_ENV、import.meta.env.MODE会按照当前环境替换常量。删除调试代码在转换过程中console.log将被删除。删除死代码Dead Code Elimination在转换过程中构建工具会分析模块代码先预计算出静态常量。识别出分支语句如果是静态的删除必然无法运行的分支。这种做减法的优化要先于加法的优化。转化import.meta相关代码如import.meta.url在构建时会结合new URL做一个整体的转化。Vite 中特有的import.meta.env和import.meta.glob会读取环境变量和文件系统进行转化。浏览器兼容性处理如果目标浏览器不支持某些现代 JavaScript 语法或 API构建工具会自动进行降级处理同时注入polyfills补丁弥补低版本浏览器的语法缺陷让代码在老旧浏览器中也能运行。分析模块依赖单个模块转化完成后构建工具扫描所有import、require语句找出当前模块依赖的所有子模块。随后对子模块重复整套解析流程最终生成整张项目模块依赖关系图谱贯穿后续所有分包、合并、优化逻辑。Bundle生成依赖图完整生成后开始合并、拆分、优化、打包最终上线文件。根据依赖关系图划分 chunk构建工具会遍历依赖关系图将模块组织成若干个chunk代码块。Chunk 可以理解为打包后的文件一个 chunk 通常对应一个输出文件。划分 chunk 的策略会影响打包后的文件结构和性能不同入口分到不同chunk多入口项目中不同的独立入口会优先生成独立的 Chunk。动态import()分到不同chunk把动态导入的模块单独划分chunk借助浏览器的异步加载能力实现资源的懒加载减少初始页面加载负担。普通import语句尽可能合到一个chunk中对于通过普通import语句引入的模块在保证功能不受影响的前提下尽量合并到同一个chunk减少chunk数量降低网络请求开销提升资源加载效率。如果公用模块被不同chunk引入会划拨给公用的chunk提取被多个chunk共享的公用模块单独划分为公用chunk避免模块重复打包。删除未使用的导出配合依赖关系剔除模块中从未被引用的导出变量、函数、组件进一步减小体积。替换生成后的资源路径JS、CSS 内引用的图片、字体、音视频路径全部替换为打包后真实资源地址。top-level-await 降级对顶层await语法进行降级处理适配不支持该语法的浏览器保证代码的兼容性让代码在各类浏览器环境中都能稳定运行。代码压缩借助专业的压缩工具对代码进行深度压缩去除多余空格、换行、注释混淆变量名和函数名大幅减小代码体积提升资源加载速度优化应用性能。生成文件 hash根据文件内容计算唯一哈希值追加到文件名末尾。内容不变 hash 不变充分利用浏览器长效缓存代码改动 hash 自动变更强制刷新缓存。按 chunk 划分 css chunkJS 引用的 CSS 不会全部塞进一个文件而是跟着 JS Chunk 走。如果main.js和admin.js各自引用了不同的 CSS构建工具会生成main.css和admin.css。如果两者共享了某个 CSS 模块这个共享 CSS 会被提取到独立的 CSS Chunk。js、css 预加载代码动态import()语句会被替换成预加载css和深层次chunk的代码。通过预加载机制提前告知浏览器加载关键资源优化资源加载顺序提升页面加载速度让用户能更快看到完整的页面内容。CSS 构建过程除了 JavaScript 模块前端构建还涉及 CSS 样式的处理。CSS 构建过程与 JavaScript 有所不同主要处理样式文件的转换和优化。CSS 分类根据用途CSS 可以分为三类公用 CSS、JS 用 CSS 和主题 CSS。公用 CSS指那些被多个页面或组件共享的通用样式例如重置样式、基础布局样式等。这些样式可能在整个项目中多处使用因此需要统一处理JS用 CSS指由 JavaScript 动态引入的样式例如通过import ./styles.css引入的样式。这类样式通常和特定的组件或功能相关需要随着对应的 JS chunk 一起打包主题用 CSS指项目中的主题样式文件可能包含不同皮肤或颜色方案的样式。主题 CSS 可能在运行时根据用户选择或环境切换需要单独处理CSS 预处理器处理如果项目中使用了 CSS 预处理器如 Sass、Less 等构建工具会首先调用预处理器将其编译为标准的 CSS。这一步和处理 TypeScript 类似都是将高级语法转换为浏览器可识别的格式。例如Sass 代码会被编译成纯 CSSLess 代码也会被编译成 CSS。构建工具通过相应的预处理器sass、less来执行预处理器的编译。CSS 内部资源路径替换在处理 CSS 时构建工具会检查 CSS 中是否有引用其他资源的路径例如import引入的样式文件路径或者url()引用的图片、字体等路径。这些路径需要根据构建后的目录结构进行替换。例如CSS 中引用了images/background.png构建工具会将其替换为打包后的路径如assets/background.abc123.png。这一步确保在最终的 CSS 中所有资源引用都是正确的不会因为构建导致路径错误。不同倍率图片优化可选对于图片资源构建工具可以根据需要进行多倍率优化。例如为了适配不同分辨率的屏幕构建工具可以生成不同分辨率的图片版本如 1x、2x、3x并在 CSS 中使用媒体查询来选择合适的图片。虽然这一步属于可选优化但在移动端开发中较为常见可以提升页面在高清屏上的显示效果。移除未使用样式类公用 CSS对于公用 CSS构建工具可以在打包时移除其中未被使用的样