.NET Core 6+Razor项目中CKEditor 5图片加载耗时过长的优化咨询

问题核心 #

纯文本内容加载仅1.5秒，带图片（尤其是多图）时加载耗时骤增至15秒+，核心原因是CKEditor默认将图片以base64编码或二进制格式存入数据库：

• 数据库查询时需返回大体积的图片数据，IO耗时剧增
• 前端解析base64字符串渲染图片时，占用大量CPU和内存，拖慢页面加载

具体优化方案 #

1. 改用文件系统存储图片（推荐） #

放弃将图片存入数据库，改为存储图片URL，数据库仅记录访问地址：

• 步骤1：配置CKEditor 5上传适配器
  修改Post.cshtml中的CKEditor初始化代码，指定上传接口：

  ClassicEditor
      .create(document.querySelector('#editor'), {
          ckfinder: {
              uploadUrl: '/Post/UploadImage' // 指向你的后端上传接口
          },
          image: {
              insert: {
                  attributes: {
                      loading: 'lazy' // 自动给图片加懒加载属性
                  }
              }
          }
      })
      .catch(error => {
          console.error(error);
      });
  

• 步骤2：编写后端上传接口
  在PostController中添加处理图片上传的Action：

  [HttpPost]
  public async Task<IActionResult> UploadImage(IFormFile upload)
  {
      if (upload == null || upload.Length == 0)
          return BadRequest(new { message = "未选择上传文件" });
  
      // 验证文件格式
      var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
      var fileExt = Path.GetExtension(upload.FileName).ToLower();
      if (!allowedExtensions.Contains(fileExt))
          return BadRequest(new { message = "仅支持JPG/PNG/GIF格式图片" });
  
      // 生成唯一文件名避免冲突
      var fileName = $"{Guid.NewGuid()}{fileExt}";
      var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", "images", fileName);
  
      // 保存文件到本地
      using (var stream = new FileStream(savePath, FileMode.Create))
      {
          await upload.CopyToAsync(stream);
      }
  
      // 返回CKEditor需要的格式：上传成功标记+图片URL
      var imageUrl = $"/uploads/images/{fileName}";
      return Json(new { uploaded = true, url = imageUrl });
  }
  

• 步骤3：配置静态文件访问
  确保Program.cs中已启用静态文件服务（默认已启用），如果uploads目录是自定义的，可额外配置：

  app.UseStaticFiles();
  // 如果需要访问非wwwroot目录的文件，可添加：
  // app.UseStaticFiles(new StaticFileOptions
  // {
  //     FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "uploads")),
  //     RequestPath = "/uploads"
  // });
  

2. 迁移已有数据库中的图片数据 #

如果已经有大量base64格式的图片存在数据库中，可批量迁移：

• 编写后台任务或控制台程序，遍历文章内容，匹配<img src="data:image/xxx;base64,xxxx">格式的标签
• 提取base64编码内容，解码为图片文件保存到文件系统
• 将内容中的base64地址替换为新的图片URL，更新数据库记录

3. 临时优化：数据库层面调整（不推荐长期使用） #

如果暂时无法切换存储方式，可做以下调整缓解延迟：

• 将图片二进制数据单独拆分到独立表，与文章表通过外键关联，避免查询文章时一次性加载所有图片数据
• 给文章表和图片表添加合适的索引，优化查询效率
• 启用数据库的二进制数据压缩功能，减少数据传输量

内容的提问来源于stack exchange，提问作者Артем Мазуров