How to load external assets only once accross isomorphic navigation?

[rickysahu]

What's the best way to load an external JS file only once across different pages and components between navigation events? For example i need the google maps js file in one specific component used across many pages. Currently im using <script..> but each time the component loads, it reloads the external js file.
Obviously multiple loads adds additional bandwidth, but more importantly when the js file reloads, it breaks gmaps

[mikecardwell]

Can you provide some example code?

[mr47]

@rickysahu it's require a dynamic modules, you can use require.ensure or wait #310.

Something like that:

export default class extends React.Component{
    componentDidMount(){
       require.ensure([], (require)=>{
          someModule = require("some-npm-module");
          someModule.init(this.someRefNode);
       })
    }
}

[babakness]

@mr47 Looks like #310 has merged, are you saying require.ensure is need with #310 merged or before?

[mr47]

@babakness currently you need to setup a custom middleware to serve additional static file chunks that webpack generates (also need a tweak for webpack config), using #310 yes we can use require.ensure

PS: I am working to make some demo, so everybody can use this.

[impronunciable]

Dynamic imports will be ready for next 2.1 #742

[sedubois]

Does this also relate to #738?