打开浏览器，按下 F12，你看到的那些 HTML、CSS、JavaScript 文件，就是 web 源码。它跟你在编辑器里写的代码不是一回事——浏览器拿到的是经过压缩、合并、甚至转译后的产物。变量名从 getUserInfo 变成 a，注释全没了，空格换行也被干掉。这不是开发者故意藏着掖着，纯粹是为了让页面加载快那么几百毫秒。

我刚开始学前端那会儿，特别迷信“源码一定要干净”。后来发现一个电商网站首页的 JS 文件压缩后还有 2MB，里面塞了十几个第三方统计脚本、广告 SDK、A/B 测试工具。你去看它的源码，满屏都是 try{ ...}catch(e){ }，根本读不下去。但人家日活几千万，跑得好好的。代码好不好看，跟产品能不能用，中间隔了十万八千里。

源码泄露的事故年年有。2023 年某知名低代码平台把 .map 文件直接扔到了 CDN 上，结果整个前端项目结构、组件命名、甚至内部 API 路径全被人扒了出来。攻击者顺着这些信息找到了未授权的接口，批量拉走了用户数据。Source Map 本来是给调试用的，上线时忘了删，就成了递刀子。这种事怪不了工具，只能怪发布流程里少了一道检查。

有人喜欢拿源码来分析竞品。比如看看对方用了什么框架、埋了哪些埋点、接口怎么设计的。这事情灰色，但拦不住。你看 React 项目，源码里搜 __SECRET_INTERNALS 基本就能确认；Vue 项目找 __vue__ 或者 _isVue。再翻翻 webpackChunk 的数组，模块 ID 和依赖关系全暴露了。我见过一个团队为了防这个，把 chunk 名全改成哈希，结果自己调试时也找不到北，最后又改回来了。

真正值得看的源码，是那些开源项目的仓库，不是线上压缩后的产物。GitHub 上 Vue 的 reactivity 包，响应式原理写得清清楚楚，effect、track、trigger 三个函数串起来，比看十篇教程都管用。React 的 Fiber 架构源码难啃，但 react-reconciler 里 beginWork 和 completeWork 的交替调用，能让你明白为什么 setState 是异步的。这些代码没压缩，有注释，有测试用例，读起来才叫享受。

浏览器 DevTools 的 Sources 面板有个 Overrides 功能，允许你直接改线上源码并生效。我拿它改过某网站的文章限制——把付费墙的 display: none 去掉，内容就出来了。也改过某工具站的请求参数，把 limit=10 改成 limit=1000，结果接口直接返回 403。这说明后端做了校验，前端改改只能骗自己。源码是前端的最后一道防线，但从来不是安全边界。

写源码的人得明白一件事：你写的每一行，最终都会以某种形式出现在用户的浏览器里。变量名可以压缩，逻辑可以混淆，但功能藏不住。该做的校验放后端，该删的 map 文件别上传，该拆的包别硬塞。至于那些扒源码学技术的，别光看热闹，打开 node_modules 里的源码读一读，比刷短视频强。

(责任编辑：时尚)