最近对花墨进行了一轮较完整的优化，花墨在性能方面得到了巨大的提升，并且还解决了我长期以来的样式痛点，在这里简单记录花墨相比于之前进行了什么升级。

大白话简述总结

以“浅棕、深棕、白色”为主题的样式进行了全局统一

将markdown样式修改为VitePress的风格。

引入懒加载，首页的启动速度更快了（没有显示的页面只会在点击后才进行加载）

优化目标

本轮优化主要围绕以下几个方向展开：

1. 提升页面加载速度，尤其是首屏加载
2. 统一整体视觉风格，将整个博客的色调统一为“深棕色、浅棕色、白色”
3. 优化 Markdown 内容展示效果，改成了VitePress的样式风格
4. 提高代码复用性与项目可维护性

样式优化

主题色收敛

项目整体主题色收敛为浅棕、深棕和白色，通过全局设计变量进行管理，再也不会有莫名其妙的绿色、蓝色、彩色了！

Markdown样式优化

Markdown 页面是这次优化的重点之一，解决了长期以来我的一个痛点…

我一直觉得我的博客正文阅读体验极其拉胯，字体样式和间距都不易阅读。

在这里向我的读者们道个歉，因为我的卑微技术和拖延症（

针对博客正文区域，重新整理了标题、段落、引用、表格、代码块等样式规则，使整体阅读体验更接近 VitePress 风格。

在字体方面，使用全局引用接入了 Inter 字体（VitePress的字体），并补充了中文与 emoji 回退字体。

性能优化

首屏加载速度提升

首屏性能方面，对非关键内容采用延迟渲染方式（懒加载），例如 footer 和返回顶部组件不再参与首屏立即加载。

移动端 Header 抽屉也改为按需加载，进一步减少初始体积。同时启用了事件合并相关配置，用于降低高频事件带来的变更检测成本。

这样虽然会带来首次加载花墨，切换路由有一定卡顿的问题。

但在CDN的加持下，二次加载会变得极其丝滑。

数据请求开销优化

请求层新增了统一缓存能力，在 HttpService 中抽象了带缓存的 GET 请求方法，支持 TTL 缓存、并发请求去重以及缓存失效处理。

这样可以减少重复请求，降低接口波动对页面的影响，也让列表切换和二次访问时的响应更加稳定。

后续优化规划

虽然目前花墨的样子已经让我自己非常喜爱了，但仍有一些可以继续推进的内容。

稳定性方面，可以进一步统一历史文件编码，补做一次关键页面的视觉回归检查，避免后续样式调整带来回退。

性能方面，后续可以继续处理图片资源，例如统一尺寸、增加 WebP 或 AVIF 格式、完善懒加载策略，并结合打包分析继续优化 chunk 拆分。API 层也可以考虑引入 stale-while-revalidate、失败重试和降级缓存等策略。

功能方面，可能会新增一个朋友圈类似的功能，或者复活曾经的美食模块，但在此之前可能需要先重构API和ERP后台项目。

最后

希望你会喜欢现在的花墨！