How to improve webpack performance?

问题

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)
    });
});

回答1:

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

回答2:

You can use the noParse option for big files, like jquery and angular.

Examples here: https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L60

Also, if you set cache to true, when watching it rebuilds a lot faster.

Another technique to increasing speed is to put big dependencies that you aren't going to edit into a separate bundle.

回答3:

Recently a new module loader, HappyPack (not written by me), makes heavy use of parallelization and disk caching to improve build times on large code bases pretty significantly. Compile times on my code base went from 40 seconds to 10. It's still a pretty new library though, so it's not extremely well documented or user friendly. Worth taking a look at though.

来源：https://stackoverflow.com/questions/27412475/how-to-improve-webpack-performance

标签

javascript

gulp

reactjs

browserify

Webpack