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

performance drop with webpack 4 in production mode #942

Open
IG-88-2 opened this issue Aug 28, 2018 · 0 comments
Open

performance drop with webpack 4 in production mode #942

IG-88-2 opened this issue Aug 28, 2018 · 0 comments
Labels

Comments

@IG-88-2
Copy link
Contributor

IG-88-2 commented Aug 28, 2018

Description: when you build react-vis with latest webpack in production mode each call to handleNearestXY will take 4-5 times longer on average. I have been able to narrow it down to one of the dependencies. Voronoi instance generation time on each mouse move changes dramatically with mode production.
Problem occur here (d3-voronoi Diagram constructor):

  while (true) {
    circle = firstCircle;
    if (site && (!circle || site[1] < circle.y || (site[1] === circle.y && site[0] < circle.x))) {
      if (site[0] !== x || site[1] !== y) {
        addBeach(site); //This guy
        x = site[0], y = site[1];
      }
      site = sites.pop();
    } else if (circle) {
      removeBeach(circle.arc); //And his friend
    } else {
      break;
    }
  }

voronoi comparison
After trying different sets of options i have been able to remove unwanted behavior setting unused option in uglifyOptions to false:

 plugins:[
        argv.env==="development" ? null : 
        new UglifyJsPlugin({
            uglifyOptions:{
                compress:{
                    unused:false
                }
            }...

which magically changes performance back to normal. Although this fixes my problem, I'm still struggling to understand what is going on and why this problem arise. I created repo to demonstrate issue:
https://github.com/WildHorse19/react-vis-uglify-performance-drop
In order to see difference just do npm run slow, npm run fast and simply try to drag mouse pointer.
The reason i decide to mention this here is because its really hard to spot this one, webpack comes with set of defaults in production mode and so happens that compression and unused:true is one of the defaults, also this wont be noticeable with small data sets.

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

2 participants