CDN引入JS，公共库还是自己打包

cdn引入js这件事，我一般先反问一句：这个库你自己会不会改？不会改、只想让它安安静静跑起来的，往公共库上一挂最省事；会改、或者版本被业务卡得死死的，那就老老实实打进自己的产物里。真正让人翻车的，往往不是选哪条路，而是选完之后没人管——版本漂了、域名换了、节点抽风了，页面白了一片还没人知道。

cdn引入js走公共库，省事是明摆着的

cdnjs、jsDelivr、unpkg 这类地方，最大的好处是把「托管」这件事外包出去了。你不用为一两个小库单独跑一遍构建，也不用担心自己的源站被这几个文件拖慢。路径里写死版本号，比如 jquery 的 3.7.1 就写 3.7.1，别图省事挂个 latest，那是给自己埋雷——上游一更新，你这边行为可能就变了，出了问题连回溯都难。

还有个老生常谈的点：跨站缓存复用。早年大家都说「别人网站也加载同一个 URL，用户浏览器里已经有缓存了，你这边等于零成本」。这话现在得打个折，主流浏览器陆续上线了缓存分区，跨站复用同一份缓存的红利弱了不少，具体表现以各家浏览器实现和官方说明为准。所以别把这个当主要理由，它顶多算个添头。

另外，公共库本身就是一台你控制不了的服务器。它什么时候维护、哪个节点绕了远路、有没有被中间人塞东西，你只能被动接受。省事是真的，但省掉的是你的运维动作，不是你的责任。

第三方一抽风，你的页面就跟着白屏

见过不止一次这种情况：后台某个组件从外部地址加载，某天那家节点出问题，或者线路被劫持，用户打开就是一片空白，报错还只出现在控制台里。你这边服务器负载正常、日志干干净净，查半天查不出原因。前端这种东西，依赖链上多一个外部环节，故障面就多一块。

所以走公共库的时候，我基本会加上三道保险。第一道是 integrity 校验，配合 crossorigin 属性，浏览器会比对文件的哈希，对不上就直接拒绝执行，被篡改的文件进不来。第二道是本地兜底：先判断那个全局变量在不在，不在就再去自己的域名拉一份。第三道是别把关键路径压在外部库上，登录、支付这类流程能自己打包就自己打包。

要提醒一句，integrity 的哈希是跟版本绑死的。你把 URL 里的版本号从 3.7.1 改成 3.8.0，哈希没跟着换，结果就是脚本直接被浏览器拦下，页面看起来「什么都没加载」。这个坑我踩过，改版本的时候顺手把 hash 一起换掉，别只改一处。

自己打包这条路，麻烦在哪

自己打包不是把文件下载下来扔进目录就完事。你要有一条能跑起来的构建链，node_modules 要能装、依赖树别打架、产物要能 tree-shaking 掉没用到的部分。小站点其实用不着上重型工具，一个简单的打包器加个压缩插件就够，别为了两个库把构建搞成一座山。

好处也很直接：版本锁定在你自己的 lock 文件里，谁都改不动；产物文件名带内容哈希，改了就换名字，缓存策略可以放到很长；出了问题是本地能复现的，不用猜上游什么时候动过手。业务代码一多，这条路基本是唯一选择，因为你要改的东西太多，公共库那份是别人的，你动不了。

还有体积问题。公共库给你的通常是全量版本，你只用到其中两三个方法，剩下的一大坨照样下载、照样解析。自己打包可以把这层砍掉，尤其是移动端，少几十 KB 的解析时间，感知是有的。

版本号和缓存策略，比选哪条路更要紧

我见过太多人纠结「公共库还是自己打包」，却把更关键的缓存配置放着不管。规律很简单：HTML 短缓存甚至不缓存，静态资源长缓存加文件名哈希。走公共库的那部分，URL 里必须带确定的版本号，让缓存能长期命中；自己打包的产物，靠构建生成的文件名变化来破缓存，别手动改 query 参数糊弄。

再就是加载方式。async 和 defer 别随手加，有依赖顺序的脚本加了 async，执行时序就不可控了，页面偶尔正常偶尔报错，最难查。没特殊要求就用 defer，至少保证按顺序、在 DOM 解析完之后执行。对于外部域名，提前加一条 preconnect 或者 dns-prefetch，把握手时间省在前面，比什么优化都实在。

我自己的习惯：一半一半

落到实践上，我的分法是：通用性强、自己绝不会改的成熟库，走公共库，配 integrity 加本地兜底；涉及业务逻辑的、需要打补丁的、内部组件，一律进构建产物。这样既不用为每个小工具维护一份源码，也不会把命门交出去。混合方案听着不干脆，但它确实最省心。

判断顺序我一般这么走：先看这个库会不会被业务改动，会就打包；再看它是不是关键路径，是就打包；最后看它有多大、有没有更轻的替代，能换就换掉。三步走完，还没被排除的，基本都可以放心挂公共库。

顺手记一下几个容易漏的开关：内容安全策略里 script-src 要放行你用的外部域名，不然加了等于没加；跨域属性漏写，integrity 校验可能不生效；本地兜底脚本别写在 defer 里，它得在判断之前就跑。这些都是小地方，出问题时都挺要命。

下次往页面里塞 script 标签之前，花两分钟确认三件事：版本写死了没有、外部那份挂了有没有兜底、安全策略放行了没有。这三件做完，公共库还是自己打包，都不会太难看。至于哪种更「先进」，真没那么重要，能一直稳定跑下去的那条路，就是对的。