spree/spree_starter

Webpack starting the server takes forever

Closed this issue · 5 comments

In the example on your website here webpack takes 34 seconds to build! That means firing up the server takes the better part of a minute. Not great.

In my tests, changes to css take about 10 seconds before they are reflected on the page. Again, not great.

@121onto initial build is always slow (it doesn't have any relation to hot reload btw). Hot reload will only rebuild parts that actually changed (so it should be fast unless you're pasting a huge amount of files into the project at once). For more information on Webpack build process please refer http://webpack.github.io/docs/.

About CSS recompilation speed - we didn't encounter it at work, will keep an eye for this.

Thanks @damianlegawiec.

How hard would it be persist a fingerprint of the codebase with each reload. You could compare the fingerprint when starting the server and wipe the webpack directory if and only if the fingerprint changes.

I improved performance about 4x by following the suggestions here:

webpack/watchpack#23

This was necessary because I enabled polling in my webpack servers:

var server = new WebpackDevServer(webpack(config), {                                                               
  ...                                                                                 
  watchOptions: {                                                                                                  
      poll: true                                                                                                   
  },                                                                                                               
  ...                                                                                                       
})  

I enabled polling so that webpack would recognize changes to source files while running on a vagrant machine.

@121onto - oh so you were using it inside Vagrant - that explains. Yeah, webpack has some issues running in containers. Could you submit a PR with this change?

I can submit if I have some spare time. Given that webpack consumes extra resources while using these settings, you'd probably want to make it an option (does foreman allow for that?).

In the meantime, here are the steps I took to get this working on Vagrant:

  1. Change all instances of "localhost" to "0.0.0.0" in webpack server configs.
  2. Update rails servers to bind to 0.0.0.0 (using the option -b 0.0.0.0).
  3. Turn firewalls off on vagrant machine, and configure to forward ports 3000, 3500, and 4000.
  4. Patch webpack per the watchpack issue referenced above.

I accomplished step 4 by saving this script to client/watchpack-ignore-node-modules.sh, adding it as a postinstall script in client/package.json, deleting client/node_modules/webpack, and then running npm install.

Add the postinstall script by adding the following line to client/package.json:

{
  ...
  "scripts": {
    ...
    "postinstall": "./watchpack-ignore-node-modules.sh",
    ...
  },
  ...
}