Comment réduire la taille de webpack du bundle?

Je suis en train d'écrire une application web à l'aide de react et webpack que mon module bundler.
Mon jsx code est vraiment léger, jusqu'à présent, la taille de l'ensemble du dossier est de 25 ko.

Mon bundle.js créé à partir de webpack est de 2,2 mo si. Après l'exécution de l'optimisation avec la -p drapeau, il réduit le bundle pour 700kb, qui est encore très grand.

J'ai regardé dans le react.min.js fichier et sa taille est de 130kb.

Est-il possible que le webpack produit de gros fichiers ou suis-je en train de faire quelque chose de mal?

webpack.config.js

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

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

MODIFIER

paquet.json:

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}
  • Sont vos seules dépendances react et react-dom? J'ai vu certaines dépendances de traction dans certaines parties de nœud (comme l'affirment), et qui peuvent obtenir de gros. Je ne sais pas webpack très bien, mais il semble bon à partir d'ici. Peut-être essayez de compiler un script unique, avec une seule petite composante, pas d'autres dépendances, et de voir le faisceau de taille
  • webpack va regrouper toutes vos dépendances dans votre bundle.js fichier, y compris les feuilles de style CSS. Avez-vous besoin d'autres fichiers que react et vos propres fichiers? Pourriez-vous poster le dependencies la section de votre package.json fichier? Quelle est la taille de vos fichiers CSS?
  • Mes fichiers css sont négligeables, et je suis en utilisant react-bootstrap et material-ui. Je ne savais pas webpack également de l'emballage les dépendances dans mon package.json. Je suis l'aide de la import états dans mon jsx fichiers à utiliser les composants. @dreyescat
  • Webpack est pas l'emballage les dépendances dans votre package.json. C'était juste pour avoir une idée de ce que d'autres dépendances autres que react vous avez eu. Toutefois, si vous utilisez react-bootstrap et material-ui (vous en avez besoin), alors oui. Vous êtes également à l'emballage dans votre fichier de regroupement. Et c'est pourquoi vous obtenez d'un gros fichier.
InformationsquelleAutor itaied | 2015-12-12