Webpack 2 “watch” Extremely Slow

I’m trying to upgrade to Webpack 2 and have had little problems except the “watch” task and watch done through webpack-dev-middleware are orders of magnitude slower (3 vs 35 seconds). Is there some sort of option I’m missing to speed this up?

note: I’m compiling a bunch of node_modules from es6 from our private NPM if you have a look at the exclude regex for Babel.

Webpack ^1.12.9:

webpack building...
[16:05:09] Webpack Bundled main bundle in 3714ms
webpack built 072b247072d6d3f314e3 in 3714ms
[16:05:26] Webpack Bundling main bundle
webpack building...
[16:05:26] Webpack Bundled main bundle in 554ms
webpack built 072b247072d6d3f314e3 in 554ms

webpack building...
[16:07:29] Webpack Bundled main bundle in 3487ms
webpack built c652ba9f489e2bab5a5e in 3487ms
[16:07:40] Webpack Bundling main bundle
webpack building...
[16:07:40] Webpack Bundled main bundle in 564ms
webpack built c652ba9f489e2bab5a5e in 564ms

Webpack 2.0.4-beta:

webpack building...
[15:34:03] Webpack Bundled main bundle in 35313ms
webpack built 7fbdcc793917d2b8c72a in 35313ms
[15:34:28] Webpack Bundling main bundle
webpack building...
[15:34:46] Webpack Bundled main bundle in 17344ms
webpack built 4425398f9ab1a3be7d51 in 17344ms

[15:39:19] Webpack Bundled main bundle in 28707ms
[15:39:31] Webpack Bundling main bundle
[15:39:46] Webpack Bundled main bundle in 14704ms

My config:

 if (runHot) {
  const Express = require('express');
  const app = new Express();
  const serverOptions = {
    contentBase: buildDir,
    quiet: true,
    noInfo: true,
    hot: true,
    inline: true,
    lazy: false,
    publicPath,
    headers: {'Access-Control-Allow-Origin': '*'},
    stats: {colors: true}
  };

  app.use(require('webpack-dev-middleware')(compiler, serverOptions));
  app.use(require('webpack-hot-middleware')(compiler));
} else {
  compiler.watch({
    aggregateTimeout: 300,
    poll: true
  }, logger);
}
{  
   "externals":{  
      "jquery":"jQuery"
   },
   "resolve":{  
      "extensions":[  
         "",
         ".js",
         ".json",
         ".jsx",
         ".html",
         ".css",
         ".scss",
         ".yaml",
         ".yml"
      ],
      "resolve":[  
         "node_modules",
         "src/js"
      ],
   },
   "node":{  
      "dns":"mock",
      "net":"mock",
      "fs":"empty",
      "__filename":true,
      "__dirname":true
   },
   "context":"/src",
   "cache":true,
   "debug":true,
   "entry":{  
      "main":[  
         "webpack-hot-middleware/client?path=http://localhost:8080/__webpack_hmr&reload=true&noInfo=true",
         "babel-polyfill",
         "./js/index.js"
      ]
   },
   "output":{  
      "path":"/dist",
      "publicPath":"http://localhost:8080/",
      "filename":"js/[name].js"
   },
   "module":{  
      "loaders":[  
         {  
            "test": /^.+\/node_modules\/(?!@hfa\/).+\.jsx?$/,
            "loader":"babel",
            "query":{  
               "presets":[  
                  "react",
                  "es2015-native-modules",
                  "stage-0"
               ],
               "plugins":[  
                  "transform-runtime",
                  "transform-decorators-legacy",
                  "typecheck",
                  [  
                     "react-transform",
                     {  
                        "transforms":[  
                           {  
                              "transform":"react-transform-hmr",
                              "imports":[  
                                 "react"
                              ],
                              "locals":[  
                                 "module"
                              ]
                           },
                           {  
                              "transform":"react-transform-catch-errors",
                              "imports":[  
                                 "react",
                                 "redbox-react"
                              ]
                           }
                        ]
                     }
                  ]
               ]
            }
         }
     ]
   },
   "devtool":"source-map"
}

Author: Fantashit

1 thought on “Webpack 2 “watch” Extremely Slow

  1. I think the unsafe resolve cache was on by default in webpack 1 and is off by default in webpack 2 (need to enable it in the default).

    Could you try setting resolve.unsafeCache = true?

    btw. your settings resolve.resolve should be resolve.modules and "src/js" should be absolute.

Comments are closed.