村民用的多是千元机、村里信号还飘：万村乐移动端首屏、包体和弱网的三板斧

万村乐数字乡村系统给村民用的移动端，和城里 App 面对的用户完全不是一拨人。我们后端是 Java 版（MySQL 8.0.28、Druid 1.2.8）或 PHP 版（UNI-APP 前端 + ThinkPHP 后台），但真正决定体验的是前端：村民手里的多是 800 到 1500 元的安卓机，村里 4G 信号时强时弱，村委会还有政务信息触摸屏查询机走同一套接口。这套环境决定了性能优化的重心不是炫技，而是"慢网、烂机、别白屏"。下面分首屏、包体、弱网三块讲我们落地的做法。

一、首屏：能不请求就不请求，能晚请求就晚请求

首屏白屏是农村场景最致命的。低端机解析 JS 慢，弱网下首包拉不回来，用户直接关掉。我们的第一招是分包加载。UNI-APP 用 subPackages 把非首屏业务拆出去，村民进首页只加载核心包：

preloadRule让首页空闲时预载政务分包，村民点进去基本秒开。第二招是骨架屏，首页先用静态骨架占位，数据回来再替换，体感上比转圈强太多。第三招是接口预拉取：登录成功后立刻把村务公开列表、通知公告这两个高频接口并行发出去，而不是等首页 onShow 再串行请求。

二、包体积：UNI-APP 编译产物压到能小则小

包体大了，弱网下下载和解析都慢。我们从三个地方砍：

第一，组件按需引入。Ant-Design-Vue 和 Uni 自带组件都走按需，不整包塞。第二，图片资源压缩。村级公示图、便民服务图标上线前统一用 tinypng 压一轮，单图控制在 30KB 以内，大图走懒加载。第三，构建侧拆包。Web 管理端用 Vite 2.8.6，我们调高了块告警阈值并手动拆 chunk，避免单文件过大：

小程序端受 2MB 主包限制更严，我们把图表库（ECharts）放在 H5 页通过 web-view 承载，小程序主包只留导航和轻逻辑，主包从 3.2MB 压到 1.4MB，分包各自控制在 1MB 出头。

三、弱网：请求会失败，得当它一定会失败来写

农村网络最典型的现象是请求发出去没响应，既不是成功也不是报错，就是挂着。我们给 Axios 0.24.0 包了一层拦截器，统一做超时和重试：

超时设 8 秒，重试两次、间隔递增，避免弱网下瞬间打爆服务端。但重试只是兜底，真正让村民"没联网也能办事"的是本地缓存。网格员上门采集时经常进山没信号，我们用 uni.setStorageSync 把待办先落本地，恢复网络后批量回传：

另外接口层我们做了合并与压缩：村级数据大屏原本一屏要拉 6 个接口，改成后端一个聚合接口返回，弱网下少一次握手就少一分失败概率；返回的 JSON 走 Gzip，万村乐文件存储走本地/阿里云/腾讯云，接口网关侧也开了压缩。

四、低端机专项：动画和重渲染是隐形杀手

千元机最怕两件事：一是不停的重渲染，二是花哨动画。我们把列表长滚动换成虚拟列表，只渲染视口内的行；首页轮播图从自动播放改成手动滑动，关掉无意义的过渡动画。Vue 3.2.31 的v-memo我们用在村务公开列表上，数据没变就跳过 diff：

政务信息触摸屏查询机是固定设备，反而要反向优化：它常年不关机，我们关掉了它的离线缓存逻辑，避免本地存储越积越大拖慢开机。

五、监控：用真实设备测，别信模拟器

优化有没有用，得用村民的同款机器验证。我们留了一批红米、荣耀的低端机做真机巡检，安卓端用 Android Studio 的 Profiler 看首屏耗时和内存，小程序用微信开发者工具的 Audits 跑性能评分。首屏目标压到 1.5 秒以内（WiFi 下）、弱网（限速 100KB/s）下不超过 4 秒出内容。每次发版前这趟真机测试是必过项，模拟器里的漂亮数据不作数。

还有一个坑值得单独提：安卓 WebView 内核碎片化严重，老荣耀机自带的是 Chrome 60 级别的 X5 之外的旧内核，对 Vue 3 的部分语法支持不全，真机上白屏但开发者工具里正常。我们最终把 H5 的构建目标锁到 es5 兜底，并在入口加了内核探测，命中老内核就降级走更朴素的渲染分支，宁可样式丑一点也不能白屏。

六、弱网下重复点击，幂等得自己兜

弱网里村民点一次没反应，顺手再点三下，服务端就可能收到四条重复提交。我们在每个写接口上挂了防重令牌：前端进页面时从后端拿一个一次性的 requestToken，随请求带上，后端用 Redis 或本地缓存记已消费令牌，重复的直接返回第一次的结果，不重复落库。Sa-Token 1.30.0 的会话体系里我们顺带把令牌和登录态绑定，避免匿名接口被刷。

七、静态资源让浏览器和微信帮着缓存

首屏快不快，一半在接口一半在静态资源。我们把 JS、CSS、图片这些不常变的东西配了强缓存：Nginx 侧给带 hash 的文件名加Cache-Control: max-age=31536000，不带 hash 的入口文件只缓存 60 秒。村民第二次进小程序或 H5，资源直接从本地取，弱网下省下的就是实打实的等待。万村乐文件存储支持本地、阿里云、腾讯云三种后端，我们在云端的桶上也开了同样的缓存头，保证触摸屏查询机和村民手机走的是同一套策略。

小结

农村移动端的性能优化，本质是向最差环境低头：UNI-APP 分包加预载解决首屏白屏，构建拆包和图片懒加载压包体，Axios 超时重试加本地草稿缓存扛弱网，低端机靠虚拟列表和关动画保流畅。万村乐的村民端、小程序、公众号 H5、安卓和触摸屏查询机共用这套思路，核心就一句——把"网络一定会差、机器一定会慢"当成前提来写代码，而不是等投诉了再救火。