PyScript刷新重复下载Pyodide致加载慢的优化方案咨询

1. 缓存Pyodide提速 #

Pyodide本身支持浏览器缓存，按下面的方法配置就行：

• 用固定版本的PyScript，别用latest这种动态版本链接。比如把<script defer src="https://pyscript.net/latest/pyscript.js"></script>换成https://pyscript.net/2.0.1/pyscript.js——固定版本的文件名不会变，浏览器会把核心文件（pyodide.js、asm.js这些）存进缓存，下次刷新直接读本地，不用重新下载。
• GitHub Pages本身会给静态资源加合理的缓存头，PyScript CDN的资源也会被浏览器自动缓存，只要版本固定，缓存就能生效。要是还嫌慢，干脆把Pyodide的核心文件下载到你的GitHub Pages仓库里，本地引用，缓存控制权更稳。

2. 点击Run再加载PyScript（自定义加载状态） #

要实现像Educative.io那样点击按钮才加载，完全去掉默认启动界面，这么做：

• 先删掉页面里默认的PyScript导入脚本，改成用JS动态加载。
• 自己做个Run按钮，点击时才触发PyScript加载，加载状态放到你指定的div里，不用默认的全屏启动界面。

示例代码：

<!-- 自定义加载状态容器 -->
<div id="loading-status" style="display:none;">正在加载Python环境...</div>
<!-- 结果展示容器 -->
<div id="output"></div>
<!-- Run按钮 -->
<button id="run-btn">Run</button>

<script>
document.getElementById('run-btn').addEventListener('click', async () => {
  const btn = event.target;
  const loadingDiv = document.getElementById('loading-status');
  // 禁用按钮，显示加载状态
  btn.disabled = true;
  loadingDiv.style.display = 'block';

  // 动态加载PyScript，必须保留defer，不然DOM没加载完会报错
  const script = document.createElement('script');
  script.src = 'https://pyscript.net/2.0.1/pyscript.js';
  script.defer = true;
  document.head.appendChild(script);

  // 等PyScript加载完
  await new Promise(resolve => script.onload = resolve);

  // 执行你的Python代码
  const pyCode = `
from pyscript import display
display("运行结果", target="output")
`;
  // 创建py-script元素并插入页面执行
  const pyScriptEl = document.createElement('py-script');
  pyScriptEl.textContent = pyCode;
  document.body.appendChild(pyScriptEl);

  // 加载完成后隐藏状态，恢复按钮
  loadingDiv.style.display = 'none';
  btn.disabled = false;
});
</script>

• 你之前删defer标签出错，是因为PyScript得等DOM解析完才能初始化，defer就是干这个的——确保脚本在DOM准备好后执行，所以绝对不能随便删，动态加载时也要加上。

要是你只是想把默认的启动界面放到指定div里，不用延迟加载，直接加个<py-config>配置就行：

<py-config>
  [splashscreen]
  enabled = true
  target = "你的自定义div ID"
</py-config>

这样默认的启动界面就会渲染到你指定的容器里，不会全屏显示。

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