Javascript 强制重新加载网页包异步导入

我目前正在进行一项从大型传统的只支持jquery的代码库到vue单页应用程序的重构工作。在这样做的过程中，我希望将我的工作划分为可管理的块，维护代码中的大部分遗留代码库，并使用事件总线作为中介，慢慢地从中提取片段和部分来重构到vue

但是，我遇到了一些问题，因为旧代码在导入时有副作用。这些副作用是由绑定到HTML的运行时jquery事件以及在导入时立即建立状态时围绕其他HTML创建的对象和类实例引起的。这会导致SPA重构出现问题，因为我希望能够从页面导航到另一个页面，但javascript将保持缓存状态，不会重新加载，现在缺少所有HTML和状态更新，因为vue将删除创建状态时使用的HTML，然后在重新呈现时添加新HTML

我正在寻找这个问题的最佳解决方案，以避免我不得不两次重构代码——一次是使用init调用进行模块化导入，然后是反应式模块化vue范式。为此，我想弄清楚如何使用Webpack的异步块导入来重新加载代码块。我知道这是可能的，因为网页包的热重新加载的文件。我主要是想在访问某个路由时强制对某些导入进行热重新加载

这就是我想做的：

async function reloadLegacyCodeOnSPARoutingChange(){
    cleanAnyPolutingGlobals();
    const initLegacyCode = await import(`./LegacyCode.js`); //somehow force it to reload this as if it were a fresh import
    let thingId = this.$store.state.thingPage.thingId;
    await initLegacyCode(thingId);
    await EventBus.$emit('initLegacyCodeState'); //apply the properties from our reactive state system
}

有没有一种有效的方法可以从客户端执行此操作？

热模块更换（HMR）不是什么黑魔法（尽管我认为是）。设想一个客户机/服务器体系结构，其中客户机（您的应用程序）询问服务器（启用HMR的网页包）您尝试导入的模块是否有任何更改。如果是，它将重新加载模块

// Add this to the file you are initially loading
if (module.hot) {
  module.hot.accept('./LegacyCode.js', async function() {
    console.log('Accepting the updated LegacyCode.js module!');
    let thingId = this.$store.state.thingPage.thingId;
    await initLegacyCode(thingId);
    await EventBus.$emit('initLegacyCodeState');
  })
} 

网站上有一个关于HMR如何工作以及如何开始的网页

---

注意：AFAICT您的旧代码在加载时会产生副作用（例如，它会扰乱全局状态）。我会特别小心，因为当以确定性方式导入模块时，热重新加载效果最好。

如果标志

useFresh

为真，则可以动态导入模块并将其从缓存中删除

async function getFile (useFresh) {
    try {
        useFresh && delete require.cache[require.resolve('./Test')];
    } catch (err) { }
    let newModule = await require('./Test');
}

---

注意：如果在动态导入的文件中使用

export default

，则必须使用

newModule.default

访问其对象

这里的问题是，webpack似乎没有任何关于如何说模块已经更改的文档，即使它没有更改。我已经浏览了那里的文档，但是我没有找到一种从服务器请求新副本的方法。我只是错过了一些简单的东西吗？由于副作用，我已经解释了重置全局状态的原因。这种热重新加载很重要的原因是基本上可以快速修复这些副作用，以便在正确的时间重新启动。dev服务器（理论上）正在监视您的文件的更改，因此它应该检测模块的更改时间。你能提供你的网页配置吗？这又不是我想做的。我不想在模块更改时重新加载文件。我想重新加载该文件，以便在不进行重大重构的情况下重新运行javascript副作用。我想在客户每次去某条路线时都这样做。当服务器上发生某些事情时就不需要了。我想要热重新加载，但用于重新加载脚本以再次运行的生产用途，而不是对服务器上更改的文件作出反应。这听起来很有希望！我以前尝试过处理require.resolve缓存，但我将使用wait require而不是webpack async import函数再次尝试，尽管我不知道它们是否只是具有不同语法的相同功能，它们或多或少具有不同的语法。我觉得这种方法应该行得通，但我们一直在努力，它似乎无法让它重新加载，即使它感觉应该这样。谢谢你的帮助！