Warum ist mein Webpack bundle.js und vendor.bundle.js so unglaublich groß?

Question

Alle meine React-Projekte neigen dazu, in der Dateigröße unglaublich groß zu sein (bundle.js ist 4.87 MB und die vendor.bundle.js ist 2.87 MB). Ich habe keine Ahnung, warum es so groß ist. Ich habe bereits uglifyJS auf, aber dies scheint nicht viel (5,09> 4.87mb und 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; 

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

Muss helfen jemand eine Idee wie kann man das beheben?

Answer 1

EDIT

Ich bin mir nicht sicher, ob Sie auf Mac/IOs oder Windows verfügbar sind, aber zwei Dinge, die ich bemerkt:

1: "deploy": "NODE_ENV=production webpack -p" nicht seens Korrekt, Sie müssen die Variable festlegen, wenn Sie sie für die Entwicklung und für die Bereitstellung erstellen, und hier legen Sie sie nicht fest.

2: Sie müssen es zuvor in der Eingabeaufforderung terminal/comand einstellen.

Hier ein Beispiel für Webpack minimieren und bereitstellen, müssen Sie ein wenig anpassen, aber ich hp dies sollte Ihnen helfen.

Sie müssen diese Umgebungsvariable für den Knoten auf comand Aufforderung setzen, öffnen Sie sie in Windows oder Terminal in Mac und:

Mac: export NODE_ENV=production 

Windows: set NODE_ENV=production 

Sie in Windows oder Liste in mac echo können Sie zu prüfen, ob die Variable gewesen hinzugefügt.

Dann in Ihrem 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'), 
      ] 
}; 

In Ihrem package.json Sie diese Skripte festlegen:

Wenn Sie unter Windows sind:

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

Wenn Sie auf Mac IOS: Wenn der Export hier nicht funktioniert, verwenden Sie stattdessen set, der Unterschied zu Windows und Mac ist der Abstand nach & &.

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

Die Verwendung der comand npm Lauf Uhr in der Entwicklung und NPM lief deploy baut es in einer verkleinerten Version für die Produktion zu bauen.

Answer 2

Können Sie versuchen, diese devtool: 'cheap-module-source-map', in config hinzuzufügen?

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

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

Answer 3

Reagieren expects youNODE_ENV-'production' zu setzen für die Produktion baut, und es durch verunstalten zu laufen - das von vielen zusätzlichen Ausführlichkeit entledigt, Konsolenprotokollierung etc. Stellen Sie sicher, dass der Umgebungsvariable gesetzt, wenn über webpack Gebäude (zB NODE_ENV=production webpack in der Befehlszeile).

Answer 4

Ich habe ein Repo-Setup mit nur React/React Dom und eine Hallo Wort React-Komponente. Die Datei vendor.js ist 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 

Hinweis: Ich bin der Knoten ENV über eine 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

Einstellung ich sehr empfehlen würde Webpack Bundle Analyzer mit Ihrem Bündel kleiner (https://github.com/th0r/webpack-bundle-analyzer) zu machen. Sie können sehen, was Ihr Bündel so groß macht. Möglicherweise verwenden Sie auch Firebase, Lodash und Jquery. Neben webpack Produktion Plugins verwenden, versuchen Sie ignorieren verwenden, was auch immer Sie nicht verwenden und Import nur das, was Sie brauchen, wie so: In webpack Plugins:

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

in Ihren Importen:

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

Für lodash, importieren Sie nur, was Sie brauchen oder eine benutzerdefinierte Build machen (https://lodash.com/custom-builds):

import find from 'lodash/find' 

Sie können auch jquery eigene Builds auch erstellen.