前端工程化是通过工具和流程解决大型项目的开发效率、代码质量和部署稳定性问题。本篇文章深入探讨构建工具、模块化标准及资源优化策略。
一、 模块化：从混沌到标准
1. CommonJS (CJS) vs ECMAScript Modules (ESM)
| 特性 | CommonJS | ES Modules |
|---|---|---|
| 引入语法 | require() | import ... from ... |
| 加载机制 | 运行时加载（同步且阻塞） | 编译时输出（静态分析，异步获取） |
| 值的处理 | 值的拷贝（导出后原模块变化不影响已导入的值） | 值的引用（导入处反映导出模块的实时变化） |
| Tree-shaking | 不支持 | 原生支持 |
- 模块化演进：对比 CJS、AMD、ESM 的底层机制与适用场景。
2. export 与 export default 的区别
- export (命名导出)：
- 每个模块可有多个。
- 导入时必须带
{}并指定相同名称（可用as别名）。 - 更有利于 Tree-shaking 剔除未使用的导出。
- export default (默认导出)：
- 每个模块只能有一个。
- 导入时无需
{}，可自定义命名。 - 通常用于导出模块的“主功能”或“类”。
二、 Webpack：从核心概念到高级原理
1. Webpack 五大核心概念
- Entry (入口)：打包的起点。
- Output (输出)：打包后的路径与命名。
- Loader (加载器)：文件“翻译官”。Webpack 默认不认识 CSS/图片，全靠 Loader 转译为 JS 模块。
- Plugin (插件)：功能扩展。监听 Webpack 生命周期的钩子（Tapable 机制），执行复杂任务。
- Mode (模式)：分为
development、production和none。
2. 常用 Loader 与 Plugin 清单
常用 Loader：
babel-loader：将 ES6+ 转换为 ES5（语法降级）。css-loader&style-loader：加载 CSS 并注入到 DOM。less-loader/sass-loader：预处理器转换。postcss-loader：配合autoprefixer自动补充厂商前缀。file-loader/url-loader：处理图片/字体，url-loader可将小图转为 Base64。
常用 Plugin：
HtmlWebpackPlugin：自动生成 HTML 并引入打包后的 Bundle。CleanWebpackPlugin：清理输出目录。MiniCssExtractPlugin：分拆 CSS 为独立文件。BundleAnalyzerPlugin：可视化分析打包体积。DefinePlugin：向代码中注入环境变量。
3. Webpack 高级原理探究
(1) 热更新 (HMR) 的全流程
- 服务端：
webpack-dev-server(WDS) 监听文件变更，重新编译产物并保存在内存中。 - 连接：WDS 与浏览器建立 Web Socket 双向通信。
- 推送：服务端推送包含新模块 Hash 的消息。
- 拉取：浏览器通过 HTTP 请求下载模块补丁（JSONP）。
- 替换：客户端利用 HMR Runtime 逻辑，在不刷新页面的情况下无损替换代码块。
(2) proxy 代理原理
Proxy 本质是开发环境中的中间件服务器。
- 原理：由于浏览器同源策略限制，前端无法直接请求跨域接口。但服务器（WDS）之间没有同源策略。WDS 拦截请求 -> 转发给目标服务器 -> 获取数据 -> 返回给前端。
(3) Tree-shaking 为什么会失效？
Tree-shaking 依赖于 ESM 的静态结构。
- 失效原因：
- 使用了 CommonJS 格式。
- 副作用 (Side Effects)：代码执行时有外部影响（修改全局变量等）。
- Babel 配置问题：如果 Babel 把 ESM 转成了 CJS，Tree-shaking 将无法分析引用关系。
三、 Vite：新一代开发者的首选
1. 架构对比：Vite 对 Webpack 的性能降维打击
- Webpack (Bundle-based)：先抓取依赖打包成巨无霸包，再启动服务器。
- Vite (Native ESM)：启动服务器后，让浏览器基于
navigator原生解析 ESM。Vite 启动时不打包，只按需转换。 - 预构建：使用 Go 语言编写 of
esbuild预处理第三方依赖，性能是 JS 工具的 100 倍。
2. 模块联邦 (Module Federation)
Webpack 5 的革命性特性：
- 概念：允许一个应用动态导入另一个应用的模块（例如 A 项目引入 B 项目的公共 Header 组件），而无需通过 NPM 发布。
- 应用：微前端架构的热门选择。
四、 进阶优化：性能与工作流
1. 代码分割 (SplitChunks)
- 目的：将第三方库（Vendor）和业务代码分离，避开巨量 JS 加载导致的首屏卡顿。通过 Webpack 的
optimization.splitChunks配置实现。
2. 什么是 Polyfill？如何优化？
- 概念：它是代码的“补丁”，用于为老旧浏览器补充不具备的原生功能（如
Promise、Map）。 - 优化：使用
core-js配合@babel/preset-env开启useBuiltIns: 'usage'，实现按需注入，极大缩减代码体积。
留言板