一、优化背景与核心目标
完成个人博客部署后，原生音乐功能存在明显局限：仅支持网易云免费歌曲试听，无法正常播放 VIP 付费曲目。本次迭代的核心目标，是改造音乐请求逻辑，让博客同时兼容免费歌曲、VIP 付费歌曲完整播放，补齐音乐模块核心功能短板。
二、计划实施
第一阶段：搭建中转 API 服务，打通 VIP 歌曲播放通道
为实现 VIP 音源获取，我搭建了独立的网易云音乐中转 API 服务，整体实施流程如下：
- 下载配套网易云中转 API 服务源码，上传至 GitHub 代码仓库，随后将项目部署到 Vercel 平台；
- 修改博客项目内
music/route.ts文件，将原请求网易云音源、提交歌曲 ID 的接口地址，全部替换为自建中转 API 服务的访问地址，博客所有音乐请求统一经过自建 API 中转； - 在中转 API 服务内完成网易云账号登录，留存登录凭证；当博客传递歌曲 ID 至中转服务后，API 会携带账号凭证请求网易云原生音源外链，获取完整歌曲播放资源，再将音源信息回传给博客前端，理论上即可实现 VIP 歌曲完整播放。但博客向中转 API 传递歌曲 ID 后，接口始终仅返回 30 秒试听片段，无法获取完整音源。
测试过程中遇到关键阻碍：无匹配登录账号对应的 Cookie 凭证
经过多次调试排查，定位问题根源：中转服务验证播放权限时，需要匹配登录账号对应的 Cookie 凭证。 该 Cookie 无法通过项目环境变量读取，只能直接硬编码写入 music/route.ts 配置文件；调整后博客发起歌曲请求时，会同步携带 Cookie 传递给中转 API，中转服务校验博客请求携带的 Cookie 与自身登录 Cookie 一致后，才会使用完整凭证调取网易云音源，至此同时播放免费、VIP 歌曲的基础功能实现。
第二阶段：全量中转带来页面加载卡顿，制定音源分流策略
测试过程中遇到关键阻碍：所有歌曲请求统一走自建中转 API 后，出现严重加载延迟问题
中转 API 平均响应耗时 6 秒，只要打开博客加载音乐组件，页面必须等待 6 秒以上才能渲染歌曲列表，歌单曲目越多等待时间越长。
针对该问题制定分流方案，区分音源请求渠道，减少中转接口调用：
- 区分规则：依靠歌曲
fee字段判断歌曲类型，最初判定逻辑为fee=0代表免费歌曲，其余数值均为 VIP 歌曲； - 分流逻辑：免费歌曲直接请求网易云原生免费外链，无需经过自建中转 API；仅 VIP 歌曲转发至中转服务获取音源。
分流改造完成后，页面加载依旧存在 6 秒延迟，未达到优化预期，随后逐层排查前后端双重阻塞问题。
第三阶段：逐层排查加载延迟根源，改造前后端同步阻塞逻辑
测试过程中遇到关键阻碍：后端批量同步拉取，短板效应拖慢整体响应
原后端处理逻辑为批量同步处理歌单曲目，多并发一次性拉取整批歌曲的音源信息，必须等待当前批次内所有歌曲数据全部获取完成后，才统一打包返回给前端。受短板效应影响，批次内只要存在一首耗时 6 秒的 VIP 歌曲，整批数据都要等待最长请求完成，页面加载速度无法提升。
针对该问题改造为流式分片推送机制：将歌单拆分批次处理，初始设定每批仅处理 3 首歌曲；免费曲、VIP 曲并行请求，任意一首音源数据拉取完成后立即推送给前端，无需等待同批次全部歌曲处理完毕，再继续处理下一批曲目。改造完成后，页面加载依旧存在 6 秒延迟，未达到优化预期，
测试过程中遇到关键阻碍：前端接收逻辑阻塞，无法实时渲染单条歌曲
后端流式改造完成后，页面加载延迟问题仍未解决，排查前端逻辑发现：前端接收数据时不会实时渲染单首歌曲，需要等待完整歌单所有数据全部接收完毕，才一次性渲染音乐列表。
同步修改前端渲染逻辑：只要接收到单首歌曲的音源数据，立刻在页面展示对应曲目，实现边加载边展示。改造完成后，页面加载依旧存在 6 秒延迟，未达到优化预期。
第四阶段：字段判断规则遗漏，测试验证方式出现失误
测试过程中遇到关键阻碍：发现歌曲fee字段判定规则存在漏洞
前后端流式改造结束后，打开博客音乐组件依旧需要 6 秒加载，反复核对后发现歌曲fee字段判定规则存在漏洞：免费歌曲包含fee=0、fee=8两种情况，此前仅配置了fee=0走原生外链，fee=8的免费曲目被错误判定为 VIP 歌曲，全部走中转 API，依旧触发 6 秒延迟。 修正判断规则：fee值为 0 或 8时，直接调用网易云免费外链；其余数值判定为 VIP 歌曲，交由中转 API 处理，分流逻辑彻底完善。
三、现存小问题与优化建议
当前整体功能已稳定可用，仅存在一处可优化的细节：
目前后端流式推送单批处理数量为 3 首。该配置不会严重影响体验，首批次中只要包含免费歌曲，页面会立刻展示曲目，剩余曲目分批次异步加载，不会造成明显卡顿；
但从减少接口请求轮次、提升加载效率角度，建议将单批处理数量由 3 首调整为 5 首，进一步优化批量拉取效率。
四、整体优化总结
本次迭代先后解决两大核心痛点：一是搭建中转 API、配置 Cookie 校验，实现网易云 VIP 歌曲完整播放；二是通过fee字段音源分流、后端流式分片推送、前端实时渲染三重改造，解决全量中转带来的 6 秒页面加载卡顿问题。
仅剩余单批处理数量这一非关键性优化点，整体博客音乐模块功能、加载性能均达到预期效果。