13年经验站长亲测：建站资源优化提速3倍，存储省70%

　　去年十二月十八号下午三点零七分，控制台报错堆栈里第 17 行那个 `Failed to execute 'fetch' on 'Window': Invalid URL`，是我亲手删掉的——不是修复，是删了。那会儿产品刚在会议室白板上画完新动效，粉笔灰簌簌掉进咖啡杯里，没人擦，白板右下角还粘着前一周需求评审留下的半张便利贴，印着“首屏≤1.2s”，字被水渍晕开了。

　　我盯着构建日志最后一行：`543 assets generated in 8.2s (961.4 MB total)`，鼠标悬停在“961.4 MB”上——这数字比我们整个 Git 历史所有 `dist/` 合起来还大。不是打包配置错了，是设计师甩来的 32 张 PNG，全带 alpha 通道，最小一张 4.8MB，命名 `icon_arrow_right_v3@2x_optimized_final_v2_new.png`，后缀里那个 `_new` 是上周五加的，`_final` 是周二加的，`_optimized` 是他发邮件说“已压缩”的证据。我把文件拖进 ImageOptim，输出大小：4.79MB。点开图层——17 个隐藏图层，其中 12 个是蒙版组嵌套蒙版组，最深一层里有 3 个空路径。我截图发群里，没配文字，只贴了 Figma 导出设置面板：导出勾选了“保留图层名称”，但没勾“导出为矢量”。

　　后端接口又变了。不是字段改名，是把 `/api/v2/user/profile` 拆成 `/api/v3/user/basic` 和 `/api/v3/user/extended?fields=address,avatar,privacy_settings`，而前端 SDK 没同步，我在 `fetchWrapper.ts` 里硬塞了个三元判断，跑测试机（MacBook Pro 2019，16GB，磁盘满得只剩 2.3GB）时控制台直接报 `RangeError: Maximum call stack size exceeded`，不是代码问题，是 Vite 的 `import.meta.glob()` 读了 src/assets/icons 下 89 个 SVG，每个都带 `` 标签，Webpack 那会儿就跪过一次，Vite 这次用的是新的 AST 解析器，解析器自己递归爆栈了。我 Ctrl+C 中断 dev server，键盘上空格键早掉了，按下去只剩塑料咔哒声，换行得用 Shift+Enter。

　　提速 3 倍？不是玄学。把 `public/` 下那些 10 年前用 `html2canvas` 生成的截图删了，总共 127 个 JPG，命名 `ie11_screenshot_2014_q3_v2.png`，最后修改时间是去年十一月二号——有人手动改了系统时间重跑了一次构建。删完，`npm run build` 日志里 `Generating static pages` 从 14.3s 缩到 4.1s。再把 `src/components/` 里所有叫 `LazyLoadImage.vue` 的组件里 `v-if="isIntersecting"` 改成 `v-show`，不是为了性能，是为了让 `IntersectionObserver` 不再在 iOS Safari 上随机失效，那次线上报错监控里全是 `TypeError: null is not an object (evaluating 'entries[0].isIntersecting')`，而 `entries[0]` 居然真是 null。改完，首屏转圈、按钮点了没反应、控制台一片红——这三个东西至少少了一个。

　　省 70% 存储？也实打实。把所有 `` 改成 ``，同时加一行 ``，不是为了兼容，是为了骗现代浏览器自动忽略后面那条 `` 的加载。但有个同事在 `vue.config.js` 里写了 `chainWebpack: config => { config.plugin('copy').tap(args => [...]) }`，把 `/public/assets` 全拷过去，结果 `/public/assets` 里本来就有 `.webp` 和 `.avif` 文件——它们是上个版本构建后手动扔进去的，和新生成的同名文件 MD5 冲突。我打开 CI 流水线日志，在 `Upload artifacts` 步骤里看到它上传了两遍 `logo.webp`，第二次覆盖了第一次，而第二次的版本没做渐进式编码，体积反而更大。我把那行 copy 插件注释掉，顺手删了 `/public/assets`，然后在 commit 记录里写：`remove public/assets — they’re not cacheable, not versioned, and someone left a Photoshop temp file named ~$favicon.psd in there`。提交哈希是 `e3c1a9d`，author 是我，date 是去年 12.19 00:23，那时外卖到了，袋子放在茶水间地上，油从底下洇出来，没人去拿。

文章配图，仅供参考

　　竖着的显示器上开着两个 DevTools：左边 Performance 面板卡在 Recording，右边 Network 面板里 `vendor.xxx.js` 显示 `(from disk cache)`，但 Size 列是 `(memory cache)`——它其实没进 memory cache，只是 Chrome 把它当作了可复用块。我不打算改这个。昨天下午三点，有人在我背后走过，椅子腿刮过地砖，吱呀一声，碰歪了我放在桌沿的咖啡杯，没洒，但杯底在桌面上拖出半道浅褐色印子。我就让它留在那儿。有些事比优化重要，比如让那个空格键保持缺失状态，比如别把 `~$favicon.psd` 当真，比如承认我们删不干净历史里的 `ie11_screenshot_2014_q3_v2.png`，它可能还在某个老旧备份盘的 LVM 逻辑卷里躺着，等着哪天 rsync 自动同步回来。

　　今天上午，我开了个终端，cd 到项目根目录，没跑 `npm run build`，先 `find . -name ".psd" -o -name "~$" -o -name "Thumbs.db" | xargs rm -f`。然后关掉那个竖屏显示器，把横屏调亮了 20%，重新打开控制台。准备看下个迭代的设计稿标注——这次要求标注单位统一用 rem，字体用 system font stack。我等他们发来 Figma 链接，自己点进去，不等通知。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!