javascript - 函数调用中延迟加载 require 语句？

Question

我需要重构以下内容以延迟加载LargeImport:

const LargeImport = require('large-import');
const useLargeImport = new LargeImport();

const MyModule = {
    init: function(){
        if(something) {
            this.fire()
        } else {
            this.fire2()
        }
    },
    fire: function(){
        useLargeImport.doSomething();

    },
    fire2: function(){
        useLargeImport.doSomethingElse();
    }
}

module.exports = MyModule;

如何在执行 fire 或 fire2 后才在客户端加载下载的 LargeImport？

Answer 1

您可以在任何 native 事件上使用异步导入。请记住在函数开头添加关键字async

 <button
    onClick={async () => {
      await import("./child.js");
    }}
  >
    click
 </button>

您的代码可以更新为

fire: async function(){
 useLargeImport.doSomething();
 await import("./child.js");
},

演示代码和盒子链接 - https://codesandbox.io/s/xenodochial-browser-tnrtj