Dlaczego mój pakiet webpack bundle.js i vendor.bundle.js jest tak niesamowicie duży?

Question

Wszystkie moje projekty React wydają się być niewiarygodnie duże pod względem rozmiaru pliku (bundle.js ma 4.87 mb, a vendor.bundle.js to 2,87 mb). Nie mam pojęcia, dlaczego jest tak duży. Mam już uglifyJS, ale to nie wydaje się, aby pomóc dużo (5,09> 4.87mb i 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; 

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

Czy ktoś ma jakiś pomysł jak to naprawić?

Answer 1

EDIT

Nie jestem pewien, czy jesteś na Mac/iOS lub Windows, ale 2 rzeczy zauważyłem:

1: "deploy": "NODE_ENV=production webpack -p" nie seens poprawne, musisz ustawić zmienną, kiedy budujesz ją dla rozwinięcia i wdrożenia, a tutaj jej nie ustawiasz.

2: Musisz wcześniej ustawić go w wierszu polecenia terminal/comand.

Oto przykład dla pakietu minipasowania i wdrażania, musisz się trochę dostosować, ale to powinno ci pomóc.

Musisz ustawić pierwszy tej zmiennej środowiskowej dla węzła w wierszu Comand, otwórz go w oknach lub terminal w Mac oraz:

Mac: export NODE_ENV=production 

Windows: set NODE_ENV=production 

Można echo w oknach lub listy w Mac, aby sprawdzić czy zmienna została dodany.

Następnie w swoim 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'), 
      ] 
}; 

W swojej package.json tę można ustawić skrypty:

Jeśli jesteś na systemie 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" 
    } 

Jeżeli jesteś na komputerze Mac IOS: Jeśli eksport nie działa, użyj zamiast tego zestawu, różnica od okien i mac to spacja po & &.

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

Użyj komand npm uruchom zegarek, aby zbudować w rozwoju i npm uruchomić wdrożenie, aby zbudować go do produkcji w wersji zminimalizowanej.

Answer 2

można spróbować dodanie tego devtool: 'cheap-module-source-map', w config?

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

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

Answer 3

React expects you ustawić NODE_ENV do 'production' do produkcji buduje, i uruchomić go przez zeszpecić - to pozbywa się wielu dodatkowym gadatliwości, rejestrowanie konsoli, itp Upewnij się, że ustawienie zmiennej środowiskowej przy budowie poprzez WebPack (np. NODE_ENV=production webpack w linii poleceń).

Answer 4

Mam konfigurację repo z tylko React/React Dom i składnikiem Hello Word React. Plik vendor.js ma 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 

Uwaga: Mam ustawienie ENV NODE poprzez 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

Chciałbym polecić korzystanie WebPACK Bundle Analyzer, aby Państwa pakiet mniejszy (https://github.com/th0r/webpack-bundle-analyzer). Możesz zobaczyć, co sprawia, że ​​twój pakiet jest tak duży. Możesz także używać całej bazy Firebase, lodash i jquery. Oprócz korzystania z wtyczek produkcyjnych WebPack, spróbuj zignorować cokolwiek nie używasz, a import tylko co trzeba tak: w wtyczek WebPACK:

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

w twojej importu:

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

Dla lodash, importować tylko to, co trzeba lub dokonać zwyczaj budowania (https://lodash.com/custom-builds):

import find from 'lodash/find' 

można również tworzyć jquery zwyczaj buduje również.