如何加速含大量ggplotly图表的R Markdown HTML文档加载？

以下是几个实用的优化方案，替代已停止维护的lazyrmd：

• 手动实现图表懒加载
  利用浏览器的Intersection Observer API，让图表仅在滚动到可视区域时才渲染，避免初始加载所有资源。封装一个懒加载的ggplotly函数：

  library(plotly)
  library(htmlwidgets)
  
  lazy_ggplotly <- function(p) {
    ggplotly(p) %>%
      onRender("
        function(el) {
          const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                Plotly.react(el);
                observer.unobserve(el);
              }
            });
          });
          observer.observe(el);
        }
      ") %>%
      onStaticRenderComplete(function(el) {
        el.style.visibility = "hidden";
      })
  }
  

  之后用lazy_ggplotly(your_ggplot_obj)替代直接调用ggplotly()即可。

• 压缩图表数据体积
  ggplotly会携带不少冗余数据，可手动清理或简化数据源：

  1. 先简化ggplot的输入数据，用dplyr筛选必要字段、聚合数据，从源头减少数据量；
  2. 用plotly_build清理图表的冗余属性：

  p <- ggplotly(your_ggplot)
  p_build <- plotly_build(p)
  # 移除不需要的自定义数据或hover冗余文本
  p_build$x$data <- lapply(p_build$x$data, function(d) {
    d$customdata <- NULL
    d$text <- stringr::str_trunc(d$text, 50) # 缩短hover文本
    return(d)
  })
  p_build
  

• 静态图占位+按需加载交互图表
  先渲染轻量的静态ggplot图片作为占位，用户点击后再加载对应的交互图表，大幅降低初始加载体积：

  library(ggplot2)
  library(plotly)
  library(htmltools)
  library(jsonlite)
  
  plot_with_placeholder <- function(p, plot_id = paste0("plot_", sample(1:1000,1))) {
    # 保存静态占位图
    static_path <- paste0(plot_id, ".png")
    ggsave(static_path, p, width = 8, height = 5, dpi = 96)
    
    # 生成交互图表的JSON数据
    p_interactive <- plotly_build(ggplotly(p))
    data_json <- toJSON(p_interactive$x$data, auto_unbox = TRUE)
    layout_json <- toJSON(p_interactive$x$layout, auto_unbox = TRUE)
    
    # 创建点击加载的HTML元素
    tags$div(
      tags$img(src = static_path, style = "cursor: pointer; max-width: 100%;"),
      tags$div(id = plot_id, style = "display: none;"),
      tags$script(sprintf("
        document.querySelector('img[src=\"%s\"]').addEventListener('click', function() {
          const targetDiv = document.getElementById('%s');
          if (!targetDiv.innerHTML) {
            Plotly.newPlot('%s', %s, %s);
          }
          targetDiv.style.display = 'block';
          this.style.display = 'none';
        });
      ", static_path, plot_id, plot_id, data_json, layout_json))
    )
  }
  

  在文档中调用plot_with_placeholder(your_ggplot)即可生成带占位的图表。

• 优化HTML文档输出设置
  在R Markdown的YAML头部调整输出参数：

  output:
    html_document:
      self_contained: false
      compress: true
      fig_caption: true
  

  • self_contained: false：将JS、CSS等资源分离为外部文件，浏览器可缓存这些资源，重复打开时更快；
  • compress: true：压缩HTML内容，减少文件体积。

• 统一加载plotly资源
  默认每个ggplotly图表会重复嵌入plotly的JS/CSS库，手动让文档仅加载一次：
  在R Markdown开头添加：

  library(plotly)
  plotly_deps <- htmlwidgets::getDependency("plotly")
  htmltools::tagList() %>% htmltools::attachDependencies(plotly_deps)
  

  这样整个文档只加载一次plotly资源，避免重复嵌入带来的体积膨胀。

内容的提问来源于stack exchange，提问作者user3516915