Redux: Webpack compile bundle.js trop volumineux (dans les exemples)

Créé le 26 sept. 2015 · 3Commentaires · Source: reduxjs/redux

Je suis nouveau sur webpack. Je ne comprends pas pourquoi il compile un bundle.js aussi lourd. Même pour le plus petit de vos exemples, todos-with-undo c'est 1,9 Mo ! Pour d'autres exemples plus complexes, c'est environ 2,5 Mo. Il y a certainement quelque chose qui ne va pas dans la configuration.
Super boulot d'ailleurs :)

examples infrastructure

Source

ilearnio

👍2

Commentaire le plus utile

Il n'y a rien de mal en soi, les exemples ne sont tout simplement pas configurés pour la production. Il est peu probable que nous le fassions ici pour éviter le fardeau de la maintenance. Veuillez consulter des modèles Webpack plus complets pour obtenir des exemples de configurations de production.

À tout le moins, vous voudrez le faire en production :

changer devtool de 'eval' à 'source-map'
ajoutez webpack.DefinePlugin pour définir process.env.NODE_ENV à 'production'
ajouter webpack.optimize.UglifyJsPlugin pour la minification
assurez-vous d'appeler Babel avec NODE_ENV=production donc .babelrc n'active pas react-transform

Une configuration de production Webpack typique pourrait ressembler à ceci :

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Voici un passe-partout incluant un mode de production si cela vous intéresse.

gaearon le 26 sept. 2015

👍46 🎉1 👎1

Tous les 3 commentaires

À tout le moins, vous voudrez le faire en production :

changer devtool de 'eval' à 'source-map'
ajoutez webpack.DefinePlugin pour définir process.env.NODE_ENV à 'production'
ajouter webpack.optimize.UglifyJsPlugin pour la minification
assurez-vous d'appeler Babel avec NODE_ENV=production donc .babelrc n'active pas react-transform

Une configuration de production Webpack typique pourrait ressembler à ceci :

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Voici un passe-partout incluant un mode de production si cela vous intéresse.

gaearon le 26 sept. 2015

👍46 🎉1 👎1

Le meilleur moyen devrait être AsyncRoute. Nous devons regrouper le template/css/js d'un composant pour éviter plusieurs requêtes, mais le charger à la demande.

chaoyangnz le 13 juin 2016

Avoir devtool tant que inline-source-map au lieu de seulement source-map gonflera également le fichier de sortie en mettant la carte source (surprise) en ligne. Évident, mais j'ai oublié cela et il m'a fallu une heure pour comprendre, donc je le mets ici pour référence future générale