一、前言

在现代前端应用中，日志回捞系统是排查线上问题的重要工具。然而，传统的日志系统往往面临着包体积过大、存储无限膨胀、性能影响用户体验等问题。本文将深入分析我们在 @dw/log 和 @dw/log-upload 两个库中实施的关键性能优化，以及改造过程中遇到的技术难点和解决方案。

核心优化策略概览：

我们的优化策略主要围绕三个核心问题：

• 存储膨胀问题 – 通过智能清理策略控制本地存储大小
• 包体积问题 – 通过异步模块加载实现按需引入
• 性能影响问题 – 通过队列机制和节流策略提升用户体验

 

二、核心性能优化

优化一：智能化数据库清理机制

问题背景

传统日志系统的一个重大痛点是本地存储无限膨胀。用户长期使用后，IndexedDB 可能积累数万条日志记录，不仅占用大量存储空间，更拖慢了所有数据库查询和写入操作。

 

解决方案：双重清理策略

我们实现了一个智能清理机制，它结合了两种策略，并只在浏览器空闲时执行，避免影响正常业务。

• 双重清理 ：
  • 按时间清理 ： 删除 N 天前的所有日志。
  • 按数量清理 ： 当日志总数超过阈值时，删除最旧的日志，直到数量达标。