__webpack_require__ is too slow

[deser]

Is there option for evaluating dependencies in lazy way?
Now initialization of my application takes much time. I profiled a bit and saw that webpack_require takes 300ms by itself

How can I improve perfomance of webpack require?

[sokra]

Take a look at the source of this function. It's pretty short, but if you see a way to optimize it, I would love to hear it.

[akovalev]

Maybe there's a way to make __webpack_require__ calls lazy so that required modules are executed only when they are actually needed. Maybe one of the ways would be to transform the source code to smth like this so that the start-up time of application is faster...

Before:

var View = require('lib/view');
var SmallPlayButton = require('views/small-play-button');
var LargePlayButton = require('views/large-play-button');
var Experiments   = require('lib/experiments')

var PlayButton = View.extend({

  render: function() {
    if (Experiments.showSmallPlaybutton()) {
      SmallPlayButton.render();
    } else {
      LargePlayButton.render();
    }
  }

});

After:

var PlayButton = require('lib/view').extend({

  render: function() {
    if (require('lib/experiments').showSmallPlaybutton()) {
      require('views/small-play-button').render();
    } else {
      require('views/large-play-button').render();
    }
  }

});

[deser]

Yes, this is exactly what I wanted to do but in this case I'd have to rewrite entire application...
I believe webpack could be smart enough to do that instead of me optionally (I can configure lazy or not in webpack config)

[akovalev]

@deser You can try to play around with https://github.com/facebook/jscodeshift. This project seems to really facilitate the process of source code transformation. Once you have this make-webpack-require-calls-lazy transformation implemented, it should not be that difficult to integrate it into webpack pipeline.

If you're not familiar with JSCodeShift, you might find this article quite helpful.

[deser]

Thanks for great idea!
I'll try that but still hope that webpack is going to implement such feature.

[dxbykov]

@deser Any success about it? We have the same issue.

[deser]

@dxbykov
No, you can do lazy initialization by hand as guys recommended before.
But I still hope that webpack will provide us such a great feature :)

[akovalev]

Initially I also tried to find a way to do it using standard Webpack configuration options, but it appeared that Webpack didn't support it, probably because it takes care of bundling modules only. But, provided that you're using Babel to transform JavaScript, it's possible to use babel-preset-fbjs/plugins/inline-requires

We recently applied this approach in SoundCloud web app and it resulted in a fairly noticeable start-up time improvement.

[akovalev]

I think it makes sense to close this issue

[deser]

Great! Many thanks, @akovalev :)

[MrBlenny]

I'm also having this issue.

Are inline-requires still the only solution? Does this work with import syntax?

[dinazil]

Same here. I use webpack for packing a chrome extension and the effect become worse for pages with many frames...

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.