Electron环境下Svelte应用更新代码后无法重载的问题咨询

我的Svelte应用基于Electron后端，通过Rollup及相关插件做运行时构建。原本是定时触发构建，现在打算改成监听文件变化触发构建；构建后的代码会通过IPC发送到渲染进程的预加载脚本。

预加载脚本里，我把代码写入一个添加到document.body、类型为module的内联script标签的innerHTML中。首次运行时应用能正常渲染，但当通过IPC发送新构建代码并替换innerHTML后，页面还是显示旧的Svelte应用，HTML和样式都没更新。

仅替换JavaScript代码没法触发应用重载，想问问有没有可行的触发方式，比如Svelte的全量清理函数之类的。

以下是预加载脚本的实现代码：

let build;
const bundle = document.createElement("script");
bundle.type = 'module';
function refreshApp(){
  if(build){
    bundle.innerHTML = `${build.js} new App({ target: document.body })`;
  }
}

ipcRenderer.on('build', (e, js, css ) => {
  build = { js, css }; // css not needed
  refreshApp(); // script tag contents are updated, but not the actual Svelte app
});

document.addEventListener("DOMContentLoaded", () => {
  document.body.appendChild(bundle);
  refreshApp();
});

核心问题在于：仅修改已插入DOM的script标签innerHTML不会重新执行脚本，而且旧的Svelte实例仍占据目标容器，新实例无法正确替换。可以通过以下方式解决：

1. 销毁旧Svelte实例+重新插入脚本标签 #

Svelte组件实例自带$destroy()方法，调用后会清理组件的DOM元素、事件监听等资源。同时，已插入DOM的script标签修改内容后不会自动执行，每次刷新需要移除旧标签、插入新标签确保代码重新运行：

修改后的预加载脚本：

let build;
let appInstance = null; // 存储旧实例引用
let bundle = null;

function refreshApp(){
  if(!build) return;
  
  // 销毁旧实例
  if(appInstance) {
    appInstance.$destroy();
    appInstance = null;
  }
  
  // 移除旧script标签
  if(bundle && bundle.parentNode) {
    bundle.parentNode.removeChild(bundle);
  }
  
  // 创建新script标签并执行代码
  bundle = document.createElement("script");
  bundle.type = 'module';
  // 将实例挂载到全局，方便后续销毁
  bundle.innerHTML = `${build.js} appInstance = new App({ target: document.body })`;
  document.body.appendChild(bundle);
}

ipcRenderer.on('build', (e, js, css ) => {
  build = { js, css };
  refreshApp();
});

document.addEventListener("DOMContentLoaded", () => {
  refreshApp();
});

2. 同步更新样式（可选） #

如果需要同步更新构建后的CSS，可以在refreshApp中添加样式处理逻辑：

let styleTag = null;

function refreshApp(){
  // ... 实例销毁和脚本标签处理逻辑
  
  // 更新样式
  if(build.css) {
    if(styleTag && styleTag.parentNode) {
      styleTag.parentNode.removeChild(styleTag);
    }
    styleTag = document.createElement("style");
    styleTag.innerHTML = build.css;
    document.head.appendChild(styleTag);
  }
}

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