小程序性能优化实战复盘:首屏白屏、包体超限、弱网卡顿、启动过慢的生产级根治方案
2026-10-10
3
做小程序这几年,被问得最多的一个问题:为什么我的小程序这么卡。卡的原因翻来覆去就那几个 —— 包体超了、setData 用猛了、接口串着调、启动链路太长。单拎出来都不难,难的是不知道先弄哪个,改了一通发现白屏还在。我们按实际踩坑的顺序来:先砍包体,再弄首屏,接着处理数据更新,最后补监控。这个顺序别乱,乱了容易白忙。一、先把包体砍下来 微信小程序主包和单个分包上限 2M,整个小程序 20M。这条硬限制卡死过不少项目。我们接过一个,主包超了传不上去,一查,问题全在主包:页面不分包全塞进去、图片没走 CDN 本地打包、组件库全量引入其实就用了一两个组件。 分包不是可选项,是必做的。tabBar 页面留主包,其他页面按业务拆。新手容易栽的一个细节:分包之间公共代码要抽到主包,不然每个分包都打包一份公共库,总包越拆越大。{"pages": ["pages/index/index", "pages/mine/mine"],"subPackages": [{ "root": "pages/order", "pages": ["order/list", "order/detail"] },{ "root": "pages/mall", "pages": ["mall/home", "mall/goods"] }],"preloadRule": {"pages/index/index": {"network": "all","pages": ["pages/order/order-list"]}}}preloadRule 记得配。用户点进 tab 的时候,该去的分包已经悄悄拉下来了,体感就是秒开。network 别只设 wifi,用户流量没那么金贵,体验要紧。包体瘦下来,启动也跟着快。小程序冷启动的 JS 代码注入是按代码量算时间的,代码少了,注入就快。光这一项,能顶掉一半的启动优化。二、首屏白屏,一半是自找的 排查下来,首屏白屏的根因基本三种:onLaunch 或 onLoad 里干了重活、首屏接口串行调用、页面引了大图或 base64 图。前两种最常见。 接口能并行就并行。有个首页,三个接口本来串着调,最后一个要等快一秒,页面就干等。改成 Promise.all 之后,首屏明显快了一大截。这个改动成本最低、收益最直接,建议先做。 骨架屏该上上,但别指望它解决慢的问题。它