web-dev-qa-db-fra.com

Comment améliorer les performances du webpack?

Je suis récemment passé de browserify à webpack et le temps de construction est passé de 4s à 16s (2014 MBP). Je comprends que webpack fait beaucoup plus que browserify mais je ne devrais pas prendre autant de temps. Mon processus de construction est assez simple. Y a-t-il des conseils ou des options pour améliorer mon temps de construction?

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)
    });
});
javascriptgulpreactjsbrowserifywebpack
24
dpham

Vous devez définir include chemins pour vos chargeurs. Exemple:

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

Pensez à faire de même pour ce cas css.

D'après mon expérience, cela peut donner des gains massifs car il n'a pas à traverser node_modules plus. Vous pouvez également excludenode_modules mais je trouve que c'est plus juste de configurer ça include. Cependant, cela devient plus compliqué si vous avez besoin de contenu hors du chemin d'inclusion.

Documents pour inclure/exclure

24
Juho Vepsäläinen

Vous pouvez utiliser l'option noParse pour les gros fichiers, comme jquery et angular.

Exemples ici: https://github.com/jeffling/angular-webpack-example/blob/b2b59dff60c35ee6d70170948ab15bba8af5e613/template/webpack.config.coffee#L6

De plus, si vous définissez cache sur true, lorsque vous le regardez, il reconstruit un beaucoup plus rapidement .

Une autre technique pour augmenter la vitesse consiste à placer de grandes dépendances que vous n'allez pas modifier dans un bundle séparé.

9
Jeff Ling

Récemment, un nouveau chargeur de module, HappyPack (non écrit par moi), fait un usage intensif de la parallélisation et de la mise en cache du disque pour améliorer les temps de construction sur de grandes bases de code de manière assez significative. Les temps de compilation sur ma base de code sont passés de 40 secondes à 10. C'est quand même une bibliothèque assez nouvelle, donc elle n'est pas extrêmement bien documentée ou conviviale. Ça vaut le coup d'y jeter un coup d'œil.

1
Scottmas