那天被客户投诉加载太慢

早上打开邮箱就看见客户骂娘，说他们打开爱家居官网要等半分钟，盆栽展示图卡得像幻灯片。我挠着头皮点开自己写的页面，好家伙，光是一个窗帘详情页的代码就两万多行，连鼠标指针都冻住了。

抄起家伙开始砍代码

先揪着CSS开刀：
1. 合并同类项

原先给沙发分类写的样式：

• .sofa-modern { padding:15px; margin:10px; border-radius:8px }
• .sofa-vintage { padding:15px; margin:10px; border-radius:5px }

直接改成：
.all-sofa { padding:15px; margin:10px }

单独加圆角的再补个小类，省下二十几行。

2. 图片压到妈都不认识

之前觉得高清图才有质感，6MB的智能马桶图塞了八张。这回用在线工具把jpg质量调到60%，导出时勾选"删除EXIF信息"，单张直接瘦身到300KB，加载时不再卡出尿。

JavaScript才是吞内存怪兽

发现个蠢问题：
3. 删掉没人点的特效

当初为了炫技给床头柜加了个360°旋转特效，三个月总共触发两次。果断删掉*的调用包，页面立马轻了200KB。

4. 用CSS偷梁换柱

灯具分类的渐变切换原版用jQuery实现：

• $(".lamp-btn").click(function(){ $(".lamp-bg").fadeTo(300,0.5) })

改成：
.lamp-btn:active + .lamp-bg { opacity:0.5; transition:0.3s }

省掉整个jQuery交互脚本。

一记绝杀

5. 代码打包前先剃头

用编译器自带的Tree Shaking（这洋屁词还是隔壁程序猿教的）功能，把没被调用的模块全踢出去。光是个窗帘计算器就清掉35K冗余代码，输出文件瘦得像营养不良。

效果猛如虎

熬到凌晨三点把五百多个页面全过了一遍，最狠的餐桌页面从4.2MB砍到700KB。第二天客户发来个咧嘴笑表情：“这回秒开！” 顺手把托管套餐从高级版降到基础版，每年白捡六千块服务器费用。

现在写代码前总念叨：
特效少一点，工资多一点
图片压得狠，老板笑得蠢