讀了 Ben Newman 的 Meteor 1.5 ? React Loadable，道理很清楚，但是舉的例子不是能很好的說(shuō)明問(wèn)題，因?yàn)樵谒睦又?，那些組件其實(shí)已經(jīng)在一開(kāi)始就加載到了前端。

Source code on Github 是我的例子，可以更好的看出 Meteor 和 React loadable 在一起使用的效果。如何調(diào)試和觀察可以參考之前的一篇《Meteor 1.5 beta 動(dòng)態(tài)加載小試》。

React loadable 的代碼也是通過(guò) websocket 動(dòng)態(tài)加載的。

因?yàn)樗麄兌际亲袷氐?tc39 dynamic imports 標(biāo)準(zhǔn)，所以兼容。這樣兩者在一起使用可以更靈活地控制代碼的動(dòng)態(tài)加載，提高效率。

注意我的例子還使用了 async、await，沒(méi)有使用 import().then(callback) 方式。

Template.info.events({
  async 'click button'(event, instance) {
    try {
      let di = await import("../imports/test_module")
      console.log("print dynamic imports: ", di.obj.test, di.num, di.default.anotherTest);

      let React = await import("react")
      let ReactDOM = await import("react-dom")
      
      import App from '../imports/components/App';
      ReactDOM.render( <App/>, document.getElementById('react-root') );
    } catch (err) {
      console.log("info error: ", err);
    }
  }
})