Meteor 1.5 + React Loadable 动态加载

读了 Ben Newman 的 Meteor 1.5 ❤ React Loadable,道理很清楚,但是举的例子不是能很好的说明问题,因为在他的例子中,那些组件其实已经在一开始就加载到了前端。

Source code on Github 是我的例子,可以更好的看出 Meteor 和 React loadable 在一起使用的效果。如何调试和观察可以参考之前的一篇《Meteor 1.5 beta 动态加载小试》

React loadable 的代码也是通过 websocket 动态加载的。

因为他们都是遵守的 tc39 dynamic imports 标准,所以兼容。这样两者在一起使用可以更灵活地控制代码的动态加载,提高效率。

注意我的例子还使用了 async、await,没有使用 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);
    }
  }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近看了下 Meteor 新出的 Beta.13 版本,最重要的一个新功能就是动态加载 (dynamic impo...
    浮点量化阅读 1,103评论 1 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,930评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,853评论 18 139
  • 时间是把双刃剑,它可以让你喜欢一个人,也可以让你忘记一个人, 如果说爱你是一种奢侈,那么时间能证明一切,可是总是有...
    默魔陌阅读 330评论 2 3
  • 大概这就是成长了吧 暗恋是一件美好的事 累了就放手 不甘就去告白 “如果以后你不结婚的话 也没有喜欢的人 也没有女...
    顺心随行阅读 461评论 2 0