3、包体积优化（上）：代码压缩、图片压缩、字体裁剪，无用代码与资源的移除

各位同学，咱们今天聊聊包体积优化。说实话，这是小程序性能优化里最「立竿见影」的一环。你想想看，用户打开小程序，第一件事就是下载代码包。包越大，加载越慢，流失率越高。我见过太多项目，功能做得挺花哨，结果首包 5MB+，用户等得直骂娘。

包体积优化的核心思路就四个字：能省则省。咱们分上、下两篇来讲，今天先搞定代码压缩、图片压缩、字体裁剪，以及怎么把那些「吃干饭」的无用代码和资源请出去。

代码压缩：别让空格和注释占地方

代码压缩这事儿，说白了就是去掉代码里的「水分」。空格、换行、注释、长变量名，这些在开发时帮了我们大忙，但在生产环境里，它们就是累赘。

小程序开发者工具默认会开启压缩，但我建议你检查一下项目配置文件 project.config.json：

{
  "setting": {
    "minify": true,
    "minifyWXML": true,
    "minifyWXSS": true,
    "minifyJS": true
  }
}

嗯，这里要注意：压缩不是万能的。JS 压缩通常能减少 30%-50% 的体积，但如果你用了大量第三方库，压缩效果会打折扣。我在项目中遇到过，一个 lodash 压缩后还有 70KB，后来改用 lodash-es 按需引入，直接降到 8KB。

我的习惯：每次提测前，我都会在开发者工具里点一下「预览」，看看上传后的代码包大小。如果超过 2MB，就得开始「动刀」了。

图片压缩：一张图毁掉所有努力

图片是小程序体积的「头号杀手」。我见过一个电商小程序，光商品图就占了 3MB。你想想看，小程序包上限才 2MB（主包），这直接超了。

图片压缩有几个层次：

  1. 选对格式：能上 WebP 就上 WebP，同样画质下体积比 PNG 小 30%。JPEG 适合照片，PNG 适合图标和透明图。
  2. 控制尺寸：小程序里图片最大宽度一般是 750rpx，你传个 4000px 的图干嘛？我习惯把图片宽度控制在 2 倍显示尺寸以内。
  3. 工具压缩：推荐用 TinyPNG 或 ImageOptim，无损压缩能再省 20%-50%。

举个例子，一张 200KB 的 PNG 图标，转成 WebP 后只有 60KB，再压缩一下到 40KB。你想想看，如果页面里有 10 张这样的图，光图片就能省 1.6MB。

我曾经踩过的坑：有一次为了省体积，把所有图片都压到极致，结果在低端机上显示模糊。后来我学乖了——压缩要适度，保留一定的画质余量。特别是商品图、人物图，用户对清晰度很敏感。

字体裁剪：别把整个字库搬进来

自定义字体是个好东西，能让页面更美观。但一个完整的字体文件动辄几 MB，你总不能为了几个特殊字符就把整个字库塞进小程序吧？

字体裁剪的思路很简单：只保留你用到的字符。比如你只需要「新年快乐」这四个字的特殊字体，那就只裁剪这四个字。

工具推荐用 font-spider（字蛛），用法很简单：

// 安装
npm install font-spider -g

// 在 CSS 里引用字体
@font-face {
  font-family: 'MyFont';
  src: url('./myfont.ttf');
}

// 在 HTML 里写上用到的文字
<div>新年快乐</div>

// 运行命令
font-spider ./index.html

运行后，字蛛会分析页面里用到的字符，然后生成一个只包含这些字符的新字体文件。我试过，一个 3MB 的字体文件，裁剪后只剩 12KB。这效果，你品，你细品。

避坑指南：字体裁剪后，如果后续新增了文字，记得重新跑一遍。我曾经因为忘了重新裁剪，导致某个页面上的字显示成「豆腐块」，被测试小姐姐追着骂了一下午。

无用代码与资源的移除：别让「僵尸代码」拖后腿

项目迭代久了，难免会留下一些「僵尸代码」——废弃的页面、没用的组件、注释掉的逻辑、重复的工具函数。这些东西不会报错，但会白白增加包体积。

怎么清理？我一般分三步走：

  1. 静态分析：用工具扫描未引用的文件。小程序开发者工具自带的「代码依赖分析」就能干这事儿。打开工具 -> 详情 -> 本地代码 -> 代码依赖分析，一目了然。
  2. 手动排查：工具不是万能的。有些代码虽然没被直接引用，但可能通过 require 或 import 间接引用。我习惯在项目里搜一下文件名，确认真的没人用了再删。
  3. 清理资源：图片、字体、JSON 文件，只要没被引用，统统删掉。特别是那些「先留着，以后可能用」的资源——相信我，以后基本不会用。

举个例子，我之前接手一个项目，发现 images/ 目录下有 200 多张图，实际用到的只有 80 张。剩下的 120 张图，要么是设计稿里的占位图，要么是旧版本的素材。清理之后，包体积直接少了 800KB。

注意：删除代码前一定要确认没有其他地方引用。我建议先做一次全局搜索，确认无误后再删。如果实在不放心，可以先注释掉，跑一遍全量测试。

总结一下今天的重点

优化项 核心方法 预期效果
代码压缩 开启 minify，按需引入第三方库 减少 30%-50%
图片压缩 选 WebP 格式，控制尺寸，工具压缩 减少 50%-80%
字体裁剪 使用 font-spider 只保留用到的字符 减少 90% 以上
无用代码移除 静态分析 + 手动排查 + 清理资源 视项目而定，通常能省几百 KB

好了，今天的内容就到这里。下节课咱们继续聊包体积优化的下半部分——分包加载、动态加载和预加载。到时候我会分享一个我实际项目中「从 4MB 砍到 1.2MB」的完整案例，保证干货满满。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →