答案是围绕“按需交付+精准加载+缓存复用”三步闭环优化：图片优先用SVG图标、WebP/AVIF格式及srcset+sizes+eager组合，脚本分层拆分、preload关键资源、defer第三方脚本，图片与JS通过时间戳本地缓存和Service Worker实现复用。
在移动端微应用中，图片和脚本是带宽消耗的主力，尤其在弱网、3G/4G切换或低端机型上，优化不当会直接导致首屏超时、白屏、CLS抖动甚至用户流失。关键不是“压缩一点”或“加个lazy”，而是围绕“按需交付+精准加载+缓存复用”三步闭环来设计。
图片：用对格式、尺寸和时机
现代微应用图片带宽浪费常源于三个错误：用JPEG/PNG加载小图标、全量拉取桌面分辨率图、未区分首屏/非首屏资源。
-
优先用 SVG 内联图标：把按钮、加载态、状态图标等矢量图形直接写进 HTML（
<svg>...</svg>），零请求、可 CSS 控色缩放，比 PNG 小 80% 以上。 -
照片类统一转 WebP 或 AVIF：服务端生成多尺寸 + 多格式版本；前端用
<picture>提供回退链，例如：<picture><source type="image/avif" srcset="a.avif 1x, a@2x.avif 2x"><source type="image/webp" srcset="a.webp 1x, a@2x.webp 2x"><img src="a.jpg" alt="..." width="300" height="200"></picture> -
srcset + sizes 必须配齐，且首屏禁用 lazy：仅写
loading="lazy"在 iOS 15.4 以下和部分安卓 WebView 中会被忽略，反而拉大图。正确写法是：<img src="fallback.jpg" srcset="s-400w.jpg 400w, m-800w.jpg 800w, l-1200w.jpg 1200w" sizes="(max-width: 400px) 100vw, (max-width: 800px) 50vw, 33vw" loading="eager" width="300" height="200">
首屏图显式设loading="eager"或不写；非首屏才用lazy，且必须带宽高 +srcset+sizes三者共存。
脚本：拆分、延迟、预加载
微应用常因 JS 打包过大、阻塞渲染、重复执行而拖慢首屏。重点不在“要不要压缩”，而在“什么时候、以什么方式、执行哪一段”。
-
入口 JS 拆为 critical / non-critical 两层：首屏必需逻辑（如路由匹配、基础 UI 渲染）打包进主 chunk；埋点、分享、统计、非视口组件等拆成异步 chunk，用
import()动态导入。 -
关键脚本用
preload提前声明：对首屏依赖的字体、核心 SDK、CSS-in-JS 主题文件，在<head>中加：<link rel="preload" href="core-sdk.js" as="script">
避免被 parser 阻塞，提升发现优先级。 -
第三方脚本默认
defer或封装加载器：微信 SDK、支付宝 API、地图 JS 等不参与首屏渲染的脚本，一律加defer；更稳妥的做法是封装一个loadScript(url, { timeout: 5000 })，失败降级或静默，不中断主流程。
缓存与本地复用：减少重复下载
微应用生命周期短、跳转频繁，但用户可能反复打开同一页面（如商品页、活动页）。靠 HTTP 缓存不够，需结合本地存储做主动管理。
立即学习“前端免费学习笔记（深入）”；
- 图片加时间戳哈希 + 本地缓存兜底：首次加载后，将图片 Blob 存入 IndexedDB 或 localStorage（配合 URL 哈希命名），并记录毫秒级时间戳；下次访问先查缓存是否在 24 小时有效期内，命中则直接渲染，省去网络请求。
- JS 资源用 Service Worker 缓存策略：对版本固定的 SDK、工具库、静态业务模块，SW 可拦截请求并返回缓存副本；更新时通过 manifest.json 版本号触发重载，兼顾稳定性与新鲜度。
- 避免 data URL 图片：base64 编码使体积增大约 33%，且无法单独缓存、不能懒加载、解码耗 CPU。所有图片都应走真实 URL 路径。
额外注意：微场景下的特殊约束
微信/支付宝/抖音等平台内嵌的微应用有运行沙箱限制，部分通用优化需适配：
-
background-image 不支持 loading="lazy"：若用 CSS 设置轮播图背景，必须改用
<img>标签 + IntersectionObserver 手动监听加载，否则永远拉原图。 -
动态插入的图片需手动触发懒加载：列表滚动加载、Tab 切换后的内容，JS 插入的
<img>不会自动触发浏览器原生 lazy，需插入后立即检查是否在视口内，或调用observer.observe(imgEl)。 - 首屏资源总大小建议 ≤ 1014KB：按联通 3G 平均速率 338KB/s 计算，3 秒内完成首屏渲染的硬指标。图片 + JS + HTML + 字体之和应控制在此阈值内，超出部分必须异步或条件加载。
