Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

__webpack_require__ is too slow #2219

Closed
deser opened this issue Mar 22, 2016 · 18 comments
Closed

__webpack_require__ is too slow #2219

deser opened this issue Mar 22, 2016 · 18 comments
Labels

Comments

@deser
Copy link

@deser deser commented Mar 22, 2016

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
developer tools - http___localhost_3000_suppliers 2016-03-22 10 50 52

How can I improve perfomance of webpack require?

@sokra
Copy link
Member

@sokra sokra commented Mar 24, 2016

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
Copy link

@akovalev akovalev commented Mar 30, 2016

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
Copy link
Author

@deser deser commented Mar 30, 2016

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
Copy link

@akovalev akovalev commented Mar 31, 2016

@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
Copy link
Author

@deser deser commented Mar 31, 2016

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

@dxbykov
Copy link

@dxbykov dxbykov commented Jul 20, 2016

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

@deser
Copy link
Author

@deser deser commented Jul 20, 2016

@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
Copy link

@akovalev akovalev commented Jul 21, 2016

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
Copy link

@akovalev akovalev commented Jul 21, 2016

I think it makes sense to close this issue

@deser
Copy link
Author

@deser deser commented Jul 21, 2016

Great! Many thanks, @akovalev :)

@MrBlenny
Copy link

@MrBlenny MrBlenny commented Oct 27, 2016

I'm also having this issue.
example

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

@dinazil
Copy link

@dinazil dinazil commented Oct 27, 2016

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

image

@webpack-bot
Copy link
Contributor

@webpack-bot webpack-bot commented Aug 11, 2017

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.

@deser
Copy link
Author

@deser deser commented Aug 11, 2017

Hey, Guys. Any further updates here?

@webpack-bot
Copy link
Contributor

@webpack-bot webpack-bot commented Feb 10, 2018

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.

@deser

This comment has been minimized.

@deser

This comment has been minimized.

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jun 6, 2018

Closing due to inactivity. Please test with latest version and feel free to create new issue with minimum reproducible test repo if you have still regressions. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants