perf(mp-weixin): 照片分两层,详情页移入 pages-poi 分包

微信主包上限 2 MB,30 张 800×600 照片单独就 2.6 MB,
整包 3.2 MB,上传被拒(错误码 80051)。

按使用场景把照片拆成两层:
- 主包缩略图 400×300 q75(678 KB),供地图、行程、打卡卡片使用,
  这些场景最大只显示 192rpx(≈288 px @DPR3),800×600 是过剩
- 分包大图 800×600 q66(1832 KB),供详情页 hero 使用,
  随 pages-poi 分包按需下载

两层都保持 4:3,PoiImage 的 aspectFill 行为不变,视觉表现与之前一致。

详情页从 pages/poi/detail 移到 pages-poi/detail:主包页面无法引用
分包资源,hero 要用大图,页面就必须在分包内。新增
coverPhotoFullUrlFor() 供分包内页面取大图,占位图仍指向主包。

verify-weixin-output.mjs 增加防回归检查:分包注册、两层照片数量
一致、主包与各分包实际体积(留 64 KB 余量)。包体再超限会在
verify 阶段失败,不必等上传才发现。

process-poi-photos.mjs 重写为双层产出,幂等,末尾报告包体占用并
在超限时退出非零。原图改从 src/photo-intake/ 读取(不提交仓库)。

改造后:主包 1522 KB、分包 pages-poi 1847 KB,均在 2048 KB 内。
mp-weixin 与 H5 均编译通过,97 个测试通过,vue-tsc 与 ESLint 无错。
This commit is contained in:
周瑞哲
2026-08-03 09:21:23 +08:00
parent 9e8c7bf908
commit f8ad5e1faf
72 changed files with 327 additions and 108 deletions
+25 -6
View File
@@ -1,11 +1,14 @@
/**
* POI 封面照片注册表
*
* 照片分两层存放,因为微信小程序主包上限 2 MB,30 张大图单独就超限:
* - 缩略图 400×300 放主包,供地图、行程、打卡等卡片使用(最大 192rpx ≈ 288 px
* - 大图 800×600 放 pages-poi 分包,供详情页 hero 使用,随分包按需下载
*
* 如何添加一张真实照片:
* 1. 压缩图片:800×600 px4:3 横版),JPEG 质量 75-82,文件 ≤ 120 KB
* 2. 命名为 <poiId>.jpg(例如 poi_gm_culture_center.jpg
* 3. 放入 src/static/poi/photos/ 目录
* 4. 将 poiId 加入下方 POI_COVER_PHOTOS_READY 集合
* 1. 原图放入 src/photo-intake/(不提交仓库),命名为 <poiId>.jpg
* 2. 跑 `node scripts/process-poi-photos.mjs` 生成两层图片
* 3. 将 poiId 加入下方 POI_COVER_PHOTOS_READY 集合
*
* 未在此集合中的 POI 会继续使用占位图 /static/poi/placeholder.png
*/
@@ -49,10 +52,26 @@ export const POI_COVER_PHOTOS_READY: ReadonlySet<string> = new Set<string>([
'poi_amap_b0jb2aurvw', // 五指耙森林公园(光明片区)
])
const POI_PHOTOS_BASE_URL = '/static/poi/photos'
/** 主包缩略图目录(400×300 */
const POI_THUMB_BASE_URL = '/static/poi/photos'
/** pages-poi 分包大图目录(800×600),仅分包内页面可引用 */
const POI_FULL_BASE_URL = '/pages-poi/static/photos'
/**
* 卡片用缩略图 URL。主包内任何页面都可用。
*/
export function coverPhotoUrlFor(poiId: string): string {
return `${POI_PHOTOS_BASE_URL}/${poiId}.jpg`
return `${POI_THUMB_BASE_URL}/${poiId}.jpg`
}
/**
* 详情页 hero 用大图 URL。
*
* 只有 pages-poi 分包内的页面能引用 —— 分包资源要等分包下载后才存在,
* 主包页面拿到这个路径会加载失败。
*/
export function coverPhotoFullUrlFor(poiId: string): string {
return `${POI_FULL_BASE_URL}/${poiId}.jpg`
}
export function hasCoverPhoto(poiId: string): boolean {