Pourquoi mon site Web est-il bundle.js et vendor.bundle.js tellement incroyablement grand?

Tous mes projets React ont tendance à être incroyablement grands dans la taille du fichier (bundle.js est de 4,87 mb et le fournisseur.bundle.js est de 2,87 mb). Je ne sais pas pourquoi c'est très important. J'ai déjà mis en place, mais cela ne semble pas aider beaucoup (5.09> 4.87mb et 2.9> 2.87mb)

var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); require('es6-promise').polyfill(); var config = { entry: { app: [ './src/entry.jsx' ], vendor: [ 'react', 'lodash', 'superagent' ] }, output: { path: './build', filename: "bundle.js" }, eslint: { configFile: './.eslintrc' }, devtool: 'eval-source-map', module: { loaders: [ { test: /\.(js|jsx)$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/}, { test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/}, { test: /\.json$/, loader: 'json' }, { test: /\.yml$/, loader: 'json!yaml' }, { test: /\.scss$/, loader: 'style!css!sass' }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } ] }, plugins: [ new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}), new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"), new webpack.optimize.UglifyJsPlugin({minimize: true}), new webpack.NoErrorsPlugin() ] }; module.exports = config; 

My package.json

 { "license": "MIT", "engines": { "iojs": ">= 1.6.2" }, "scripts": { "create:index": "mustang -t index.tmpl -i config.json -o build/index.html", "predev": "mkdir -p build/ && npm run create:index", "dev": "webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build", "backend": "NODE_ENV=production node server/server.js", "backend:dev": "DEBUG=tinderlicht node server/server.js", "predeploy": "mkdir -p build/ && npm run create:index", "deploy": "NODE_ENV=production webpack -p", "test": "node webpack-mocha.config.js" }, "devDependencies": { "autoprefixer-loader": "^3.2.0", "axios": "^0.7.0", "babel": "^5.8.23", "babel-core": "^5.8.25", "babel-eslint": "^4.1.3", "babel-loader": "^5.3.2", "bluebird": "^2.10.2", "css-loader": "^0.19.0", "es6-collections": "^0.5.1", "es6-promise": "^3.0.2", "eslint": "^1.6.0", "eslint-loader": "^1.1.0", "eslint-plugin-react": "^3.5.1", "extract-text-webpack-plugin": "^0.8.2", "file-loader": "^0.8.1", "firebase": "^2.3.1", "fireproof": "^3.0.3", "jquery": "^2.2.0", "json-loader": "^0.5.1", "jsonld": "^0.4.2", "jsx-loader": "^0.13.2", "lodash": "^3.3.0", "mustang": "^0.1.3", "node-sass": "^3.3.3", "react": "^0.14.0", "react-dom": "^0.14.0", "react-hot-loader": "^1.1.5", "sass-loader": "3.0.0", "style-loader": "^0.12.4", "superagent": "^1.4.0", "url-loader": "^0.5.5", "webpack": "^1.5.3", "webpack-dev-server": "^1.7.0" }, "dependencies": { "body-parser": "^1.15.0", "cors": "^2.7.1", "debug": "^2.2.0", "express": "^4.13.4", "mustache": "^2.2.1", "nodemailer": "^2.1.0", "nodemailer-sendmail-transport": "^1.0.0", "react-radio-group": "^2.2.0", "uglifyjs": "^2.4.10" } } 

Quelqu'un a-t-il une idée de la façon de résoudre ce problème?

MODIFIER

Je ne suis pas sûr si vous êtes sur Mac / IOs ou Windows, mais 2 choses que j'ai remarqué:

1: "deploy": "NODE_ENV=production webpack -p" ne se saisit pas correctement, vous devez définir la variable lorsque vous la construisez pour développer et déployer et ici vous ne la configurez pas.

2: Vous devez l'avoir précédemment placé sur l'invite terminal / comand.

Voici un exemple pour le Webpack minify et deploy, vous devez adapter un peu mais je hp cela devrait vous aider.

Vous devez d'abord définir cette variable d'environnement pour le nœud sur l'invite comand, l'ouvrir dans Windows ou terminal en mac et:

 Mac: export NODE_ENV=production Windows: set NODE_ENV=production 

Vous pouvez faire écho dans Windows ou une liste en mac pour vérifier si une variable a été ajoutée.

Ensuite, dans votre webpack.config.js

  var PROD = process.env.NODE_ENV == 'production'; var config = { entry: { app: [ './src/entry.jsx' ], vendor: [ 'react', 'lodash', 'superagent' ], output: { path: './build', filename: PROD ? "bundle.min.js" : "bundle.js" }, plugins: PROD ? [ new webpack.optimize.UglifyJsPlugin({minimize: true}), new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js'), ]:[ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), ] }; 

Dans votre package.json, vous pouvez définir ces scripts:

Si vous êtes sur Windows:

 "scripts": { "dev": "set NODE_ENV=development&&webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build", "deploy": "set NODE_ENV=production&&webpack -p" } 

Si vous êtes sur Mac IOS: Si l'exportation ne fonctionne pas, utilisez l'option set, la différence de Windows et Mac est l'espace après &&.

 "scripts": { "dev": "export NODE_ENV=development&& webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build", "deploy": "export NODE_ENV=production&& webpack -p" } 

L'utilisation du comand npm surveille pour développer le développement et npm exécuter déployer pour le construire pour la production dans une version minifiée.

Je recommande vivement d'utiliser Webpack Bundle Analyzer pour rendre votre bundle plus petit ( https://github.com/th0r/webpack-bundle-analyzer ). Vous pouvez voir ce qui rend votre paquet tellement important. Vous pouvez également utiliser toutes les bases de travail, lodash et jquery. En plus d'utiliser les plugins de production de webpack, essayez d'utiliser ignorer tout ce que vous n'utilisez pas et d'importer uniquement ce dont vous avez besoin, de la manière suivante: Dans les plugins Webpack:

  new webpack.IgnorePlugin(/^\.\/auth$/, /firebase$/), new webpack.IgnorePlugin(/^\.\/storage$/, /firebase$/), new webpack.IgnorePlugin(/^\.\/messaging$/, /firebase$/), 

Dans vos importations:

  const Firebase: any = require('firebase/app'); require('firebase/database'); 

Pour lodash, importez uniquement ce dont vous avez besoin ou créez une création personnalisée ( https://lodash.com/custom-builds ):

 import find from 'lodash/find' 

Vous pouvez également créer des versions personnalisées jquery.

J'ai une configuration de repo avec juste React / React Dom et un composant Hello Word React. Le fichier vendor.js est de 189 Ko.

https://github.com/timarney/react-setup

 var path = require('path') var webpack = require('webpack') var config = { entry: { app: path.resolve(__dirname, './src/main.js'), vendors: ['react'] }, output: { path: './src', filename: 'bundle.js' }, devServer: { inline: true, contentBase: './src', port: 3000 }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(true), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { warnings: false, screw_ie8: true } }), new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') ] } if (process.env.NODE_ENV === 'production') { config.output.path = path.join(__dirname, 'dist/') } module.exports = config 

Remarque: Je définis NODE ENV via un script NPM

 "scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1", "build": "NODE_ENV=production webpack -p && cp src/index.html dist/index.html" }, 

Pourriez-vous essayer d'ajouter ce devtool: 'cheap-module-source-map', dans config ?

  var config = { devtool: 'cheap-module-source-map', entry: { .... 

http://webpack.github.io/docs/configuration.html#devtool

React vous NODE_ENV à définir NODE_ENV en 'production' pour les versions de production, et à l'exécuter à travers Uglify, ce qui permet de débarrasser beaucoup de détails supplémentaires, la connexion à la console, etc. Assurez-vous de configurer cette variable d'environnement lors de la création via le site Web (p. Ex. NODE_ENV=production webpack à la ligne de commande).