美文网首页meteor 开发者
Meteor 1.5 + React Loadable 动态加载

Meteor 1.5 + React Loadable 动态加载

作者: 浮点量化 | 来源:发表于2017-04-10 20:11 被阅读124次

    读了 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 1.5 + React Loadable 动态加载

        本文链接:https://www.haomeiwen.com/subject/pqcyottx.html