Perché il mio webpack bundle.js e vendor.bundle.js sono così incredibilmente grandi?

Question

Tutti i miei progetti React tendono ad essere incredibilmente grandi nelle dimensioni del file (bundle.js è 4,87 mb e il vendor.bundle.js è 2,87 mb). Non ho idea del motivo per cui è così grande. Ho già uglifyJS su, ma questo non sembra aiutare molto (5,09> 4.87MB e 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; 

mio 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" 
    } 
} 

Qualcuno ha qualche idea su come risolvere questo?

Answer 1

EDIT

Non sono sicuro se siete su Mac/iOS o Windows, ma 2 cose che ho notato:

1: "deploy": "NODE_ENV=production webpack -p" non seens corretto, è necessario impostare la variabile quando la si sta creando per lo sviluppo e la distribuzione e qui non la si imposta.

2: è necessario impostarlo in precedenza sul prompt di terminale/comando.

Ecco un esempio per il webpack minify e deploy, devi adattarti un po 'ma io hp questo dovrebbe aiutarti.

È necessario impostare prima questa variabile ambiente per il nodo su richiesta comand, aprirlo in finestre o terminale mac e:

Mac: export NODE_ENV=production 

Windows: set NODE_ENV=production 

È possibile echo in finestre o elenco di mac per verificare se la variabile è stata aggiunto.

Poi, nel tuo 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'), 
      ] 
}; 

Nel vostro package.json è possibile impostare questo script:

Se siete su 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" 
    } 

Se sei su Mac IOS: Se l'esportazione non funziona qui utilizzare set invece, la differenza tra windows e mac è lo spazio dopo & &.

"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'uso dell'orologio corsa NPM COMAND per costruire nello sviluppo e implementazione NPM correre per costruirlo per la produzione in una versione minified.

Answer 2

Puoi provare l'aggiunta di questa devtool: 'cheap-module-source-map', in config?

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

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

Answer 3

Reagire expects you per impostare NODE_ENV-'production' per la produzione costruisce, e per farlo funzionare attraverso Uglify - questo si libera di un sacco di verbosità in più, la registrazione della console, ecc Assicurarsi di impostare la variabile ambiente quando si costruisce tramite webpack (es. NODE_ENV=production webpack alla riga di comando).

Answer 4

Ho una configurazione repo con solo React/React Dom e un componente di Hello Word React. Il file vendor.js è 189 KB.

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 

Nota: sto impostando l'ENV NODO attraverso un NPM script

"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" 
    }, 

Answer 5

mi raccomando utilizzando Webpack Bundle Analyzer per rendere il vostro pacco piccolo (https://github.com/th0r/webpack-bundle-analyzer). Puoi vedere cosa rende il tuo pacchetto così grande. Potresti anche utilizzare tutti firebase, lodash e jquery. Oltre a utilizzare i plugin di produzione webpack, provare a utilizzare ignorare tutto ciò non è in uso e l'importazione solo quello che serve in questo modo: In plugin WebPack:

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

Nelle tue importazioni:

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

Per lodash, importare solo quello che serve o si effettua una generazione personalizzata (https://lodash.com/custom-builds):

import find from 'lodash/find' 

È inoltre possibile creare jquery personalizzato costruisce pure.