如何快速切图优化代码，让速卖通页面焕新？

速卖通页面焕新，先从切图说起

先说实话，切图慢得跟乌龟赛跑。

那怎么才能像闪电一样嗖一下就搞定？

哈哈，别急，咱先把思路捋清楚。

先把页面整体拆成大块儿。

大块儿先切，小细节后切。

这样可以省掉来回切的时间。

记得切之前，先在纸上或草稿里画个框。

规划好哪些是必须的，哪些可以省。

不然等会儿切到一半，又发现尺寸不对，得重新来，抓到重点了。。

Photoshop 快速切图小技巧

画完线后不要立刻点“裁剪”。

啊这... 先选中所有同类图层，用“自动裁剪”一次性搞定。

再用快捷键 Ctrl+Shift+S 导出为 WebP 或 PNG-24。

文件名统一加上前缀，后期找起来更省事。

如果是多分辨率需求，直接在导出面板勾选 “2x、3x”。

代码优化，让页面飞起来

页面卡顿？别怪网络，可能是代码太臃肿了。

第一步，把 CSS 和 JS 合并压缩。

第二步，用懒加载图片。 第三步，开启浏览器缓存，让重复访问时直接命中本地资源。 CSS 精简指南 删除未使用的选择器，比如那些只在旧版页面出现的 .old-header。 .scss 编译时加上 --style compressed，一键压缩输出。 尽量使用变量和混入，减少重复代码量。 JavaScript 优化要点 把业务逻辑拆成模块化文件，再用 webpack 打包成一个体积小的 bundle，太坑了。。

我悟了。 记住大块优先，小块细化；代码合并压缩，懒加载不可少；插件玩转效率。