你有没有遇到过这种情况：点开一个小程序，白屏转圈好几秒，用户等不及直接关掉走了。据统计，启动时间每增加1秒，用户流失率就会明显上升。尤其对于工具类小程序（比如查公交、扫码点餐），用户要的就是快。
今天我们从实际开发角度，聊聊如何让小程序“秒开”。以下五个技巧，按优先级排序——先做收益最大的。
微信小程序限制主包不能超过2MB，但很多开发者不注意代码大小。一个干净的代码包应该控制在1MB以内。
怎么做：
清理未使用的图片、组件、页面。不要把整张设计稿切图都塞进去。
图片使用WebP格式（微信支持），比PNG小30%-40%。
开启开发者工具中的“上传代码时压缩混淆”选项。
更重要的是分包加载。把不常用的页面（比如设置页、关于页、会员中心）拆到分包里。用户打开小程序时只下载主包，进入分包页面时才下载对应分包。
示例目录结构：
├── pages/ （主包，首页、核心功能） ├── packageA/ （分包，个人设置等） ├── packageB/ （分包，活动页面等）
在app.json中声明：
{ "pages": ["pages/index/index", "pages/menu/menu"], "subPackages": [ { "root": "packageA", "pages": ["settings/settings", "about/about"] } ] }
这样首屏加载体积可能从2MB降到500KB，效果立竿见影。
很多小程序在onLoad里请求数据，网络慢时白屏时间长。改进思路有两个：
使用数据预拉取：在小程序启动时（还没打开页面），微信就会向你的服务器请求一次数据。你需要在后台配置一个数据预拉取接口，小程序启动时数据就已经在本地了。
本地缓存兜底：首次打开后，把关键数据（如首页列表、用户设置）存到wx.setStorageSync里。下次启动时先展示缓存数据，同时在后台请求新数据并更新。用户感觉不到等待。
代码模式：
Page({ onLoad() { // 1. 立即展示缓存 const cached = wx.getStorageSync('homeData') if (cached) this.setData({ list: cached }) // 2. 请求最新数据 wx.request({ url: '...', success: (res) => { this.setData({ list: res.data }) wx.setStorageSync('homeData', res.data) } }) } })
启动过程中，尽量避免使用同步API，比如wx.getStorageSync、wx.getSystemInfoSync。虽然方便，但它们会阻塞渲染线程。
替代方案：
用wx.getStorage异步版本。
系统信息可以一次异步获取后存全局变量，后面不要再调。
另外，不要在onLoad里做耗时循环或复杂计算。如果必须计算，挪到onReady或使用wx.nextTick推迟执行。
即使数据还没回来，也要让用户看到一个有结构的界面。骨架屏（灰色块动画）能显著降低用户的等待焦虑。
实现方式：
初始数据中设置一个loading: true，界面用灰色块渲染。
数据返回后setData({ loading: false })，显示真实内容。
第三方组件库如Vant Weapp、TDesign都有现成的骨架屏组件，直接引用即可。
这一点不仅影响启动后交互，也影响页面切换时的流畅度。常见错误：在onLoad里一次性setData一个巨大对象，比如把100条聊天记录全部传过去。
原则：
只传视口内需要展示的数据，列表用分页或虚拟滚动。
避免频繁调用setData，能合并的尽量合并。
对不需要界面更新的数据，直接赋值给this对象，不要走setData。
示例：
// 坏习惯 this.setData({ a: 1 }) this.setData({ b: 2 }) // 好习惯 this.setData({ a: 1, b: 2 })
微信开发者工具提供了“性能面板”，可以查看启动耗时、下载代码包时间、首次渲染时间。真机上可以在小程序内调用wx.getPerformance获取性能数据。
一个实用的调试方法：在App.onLaunch和首页onLoad里分别记录时间戳，相减得到启动到页面加载的耗时。发布前在多个机型上测试，不要只在模拟器里自我感觉良好。
