响应式开发中的存储盲区：90%空间浪费的3个真相

　　去年端午，我蹲在客户服务器后台清缓存，看到那个叫“responsive-images-2017-v2”还挂着，底下压着七个同名文件夹，日期从一三年到二二年。我点了删除——鼠标悬停三秒，没点下去。旁边老张递来冰啤酒，瓶身结的水珠滴在我键盘F键上，那键早不灵了，按十次有三次没反应。

　　一三年做响应式，全靠手切图。记得在城西那间朝北小屋，风扇嗡嗡响，窗户关不严，风灌进来把打印出来的媒体查询表吹得满地跑。我和李工两人，他写CSS，我切PSD——一张Banner，导出三套尺寸：@1x、@2x、再加个“宽屏特别版”，名字叫“banner-home-wide-retina”。我们把它扔进/static/img/里，从来不管它占多大空间。那时租的是联通IDC机房，50G硬盘包年980，李工说：“存得下，就是存得下。”谁管冗余？连CDN都没配，用户加载失败就刷新，刷新三次不成就换浏览器。我原以为像素密度是未来三年最大变量，结果二二年发现，真正咬人的不是PPI，是那堆never-deleted的3.2MB banner-bg.jpg副本。

　　一七年换云。阿里云ECS刚推弹性存储，我们立刻迁了。那时觉得牛逼，自动扩容嘛。可迁移清单里根本没列“历史图片归档策略”。王磊那会儿还在，他写了个脚本，每天凌晨扫一遍/img/和/assets/，把带“-backup”、“-old”、“_v3_final”后缀的全挪到oss://archive/里——但他没删源目录，只挪。结果半年后客户问“为什么oss费用涨了四倍”，我打开控制台，archive桶里躺着37GB一七年之前的切图压缩包，而主站静态资源才12GB。更绝的是，这些包里至少三分之一压根没被HTML引用过，连webpack的splitChunks都没捞到它们。我原以为自动化=省心，结果自动归档成了自动囤积。这步我走错了：没设清理红线，也没给archive桶加生命周期规则。现在看，不是技术不行，是当时脑子缺根筋，把存储当抽屉，塞满就拉上，忘了抽屉会生锈。

文章配图，仅供参考

　　二二年做医疗H5，要过等保三级。安全组同事硬逼我们开对象存储访问日志，结果第一周就筛出异常：每天有两万多次请求打向一个叫“icon-font-legacy.woff2”的文件——但页面里根本没调用它。顺着日志往回追，发现是一三年某版移动端首页埋的旧统计JS，在异步加载字体时拼错了路径，漏写了version参数，却一直没挂掉，五年多都在空转打点。那个字体文件本身2.1MB，服务器又开了Gzip，但日志显示它被反复拉取、缓存、丢弃，再拉取……光这一项，月均浪费带宽43TB。而我们同期优化图片懒加载，省了不到2TB。讽刺吧？当年觉得“先上线再说”的小毛刺，五年后长成血管瘤。桌上那台戴尔显示器牌子我早记不清了，只记得屏幕右下角有个永远消不掉的淡黄光斑。

　　说到显示器……前两天在茶水间撞见陈默，他早不做前端了，现在搞社区团购选品。他问我：“你们还手动配media query？”我说“用CSS Container Queries了”。他笑：“哦，那你们终于不用再切二十张图了？”我点点头，他转身拧开保温杯盖，茶叶浮上来——那杯子里泡的是金银花，不是茶。我愣了一下，想起一三年他帮我调试Sass mixin时，桌上也摆着同样一杯金银花，杯底沉淀着黑渣。

　　其实真没必要非得“优胜劣汰”四个字押韵。去年端午清缓存那天，客户总监在微信里发了个截图：他们竞品官网在Safari 16.4里轮播图错位，原因是用了rem+vw混排，而我们的版本正常。我就随手回了个“因为去年五月我们把所有视口相关单位全干掉了，统一换viewport-fit=cover+clamp()”。没提那晚删掉23个冗余图片文件夹的事，也没说其中两个文件夹名是用拼音乱敲的，比如“shuomingtu-yunxu-01”，根本没人能看懂啥意思。但那天我知道，90%的空间浪费不是来自技术，是来自我们自己心里那道模糊线——分不清“暂时保留”和“永远占坑”的界限。现在这套我也拿不准还能干几年。

　　对了，风扇还在响。去年端午那天，办公室新装了空调，但那台旧风扇没拆，就搁在窗台边，扇叶积灰，转轴卡顿，每分钟“咔哒”一声。我试过修，螺丝刀拧断了两根，还是没修好。

（编辑：均轻资讯网）

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