How to improve webpack performance?

dpham picture dpham · Dec 11, 2014 · Viewed 17.7k times · Source

I recently switched from browserify to webpack and the build time jumped from 4s to 16s on (2014 MBP). I understand webpack does alot more than browserify but i shouldn't take that long. My build process is fairly simple. Are there any tips or options to improve my build time?

var webpackOptions = {
  cache : true,
  output: {
    filename: '[name].js',
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
};


gulp.task('buildJs', function(){ 
    multipipe(
      gulp.src(jsSrcPath),
      named(),
      webpack(webpackOptions),
      uglify(),
      gulp.dest(jsDestPath)
    ).on('error', function(error){
      console.log(error)
    });
});

Answer

Juho Vepsäläinen picture Juho Vepsäläinen · Apr 23, 2015

You should set include paths for your loaders. Example:

{ test: /\.js$/, loader: 'jsx-loader', include: jsSrcPath }

Consider doing the same for that css case.

In my experience this can give massive gains as it doesn't have to traverse through node_modules anymore. Alternatively you could exclude node_modules but I find it neater just to set up that include. It gets more complicated if you are requiring content out of the include path, though.

Docs for include/exclude