Google Apps Script项目写入JSON文件优化Web应用数据加载速度

这个思路非常靠谱！既然你的数据每月仅更新两次，完全没必要让用户每次加载Web应用都走google.script.run去拉取和转换数据——预生成静态JSON文件直接供前端使用，能把加载延迟降到最低，用户体验提升明显。下面是具体的实现步骤：

1. 编写服务器端脚本，生成并写入静态数据文件 #

首先我们需要一个函数，负责从电子表格拉取数据、转成JSON，然后写入到项目中的静态文件里。这里推荐把JSON存为JS文件（而非纯JSON），这样前端可以直接引用全局变量，省去解析步骤：

function generateStaticJson() {
  // 从目标电子表格拉取数据（替换成你的表格ID和工作表名）
  const ss = SpreadsheetApp.openById('你的电子表格ID');
  const sheet = ss.getSheetByName('数据工作表');
  const rawData = sheet.getDataRange().getValues();

  // 将表格数据转换为结构化JSON（假设第一行是表头）
  const headers = rawData[0];
  const structuredData = rawData.slice(1).map(row => {
    const rowObj = {};
    headers.forEach((header, idx) => {
      rowObj[header] = row[idx];
    });
    return rowObj;
  });

  // 转换为压缩后的JSON字符串（减少文件体积）
  const jsonString = JSON.stringify(structuredData, null, 0);

  // 写入/更新项目中的data.js文件
  const scriptProject = ScriptApp.getProject();
  let dataFile;
  try {
    // 尝试获取已存在的data.js文件
    dataFile = scriptProject.getFilesByName('data.js').next();
  } catch (e) {
    // 如果不存在，创建新文件
    dataFile = scriptProject.createFile('data.js', '');
  }
  // 将JSON包装为全局变量，方便前端直接调用
  dataFile.setContent(`const appStaticData = ${jsonString};`);

  Logger.log('静态数据文件已成功更新');
}

2. 设置自动更新触发器 #

既然数据每月更新两次，我们可以给上面的函数加个定时触发器，让它自动同步数据：

• 打开脚本编辑器，点击左侧的「触发器」图标（时钟样式）
• 点击「添加触发器」，配置如下：
  • 选择要运行的函数：generateStaticJson
  • 选择事件源：「时间驱动」
  • 选择类型：「每月计时器」
  • 设置你需要更新的日期（比如每月1号和15号）和具体时间
• 保存触发器即可，它会自动按设定时间更新静态文件

另外，如果你的数据更新不是固定时间，也可以在写入电子表格的函数末尾调用generateStaticJson()，实现数据更新后立即同步静态文件。

3. 前端直接引用静态数据 #

现在你的Web应用主HTML文件可以直接引入data.js，不用再调用google.script.run了，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <!-- 引入预生成的静态数据文件 -->
  <script src="data.js"></script>
</head>
<body>
  <div id="calculation-results"></div>

  <script>
    // 页面加载完成后直接使用全局变量appStaticData进行计算和渲染
    function renderCalculations() {
      const resultsContainer = document.getElementById('calculation-results');
      
      // 这里替换成你的实际计算逻辑
      const totalValue = appStaticData.reduce((sum, item) => {
        return sum + (item['数值字段'] || 0);
      }, 0);

      resultsContainer.innerHTML = `<h3>计算结果</h3><p>总计：${totalValue}</p>`;
    }

    window.addEventListener('load', renderCalculations);
  </script>
</body>
</html>

4. 部署与注意事项 #

• 部署Web应用时，确保data.js文件被包含在项目中（默认会自动包含）
• 如果更新了静态数据文件，正式部署的Web应用需要重新发布新版本，才能让所有用户获取到最新数据；测试部署则会自动同步更新
• 如果数据量较大，可以考虑在生成JSON时进一步压缩（比如去掉不必要的空格），或者对数据做精简处理，只保留Web应用需要的字段

这样改造后，用户加载Web应用时直接从静态文件获取数据，完全省去了服务器端脚本的调用和等待时间，性能提升会非常明显。

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