मेरा वेबपैक bundle.js और vendor.bundle.js इतना अविश्वसनीय रूप से बड़ा क्यों है?

Question

मेरी सभी प्रतिक्रिया परियोजनाएं फ़ाइल आकार में अविश्वसनीय रूप से बड़ी होती हैं (बंडल.जेएस 4.87 एमबी है और विक्रेता.बंडल.जेएस 2,87 एमबी है)। मुझे नहीं पता कि यह बड़ा क्यों है। मैं पहले से ही पर uglifyJS है, लेकिन यह एक बहुत (5.09> 4.87mb और 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; 

मेरे 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" 
    } 
} 

किसी को भी किसी भी विचार है प्रतीत नहीं होता इसे कैसे ठीक करें?

Answer 1

संपादित

मुझे यकीन है कि अगर आप मैक/iOS या Windows पर हैं नहीं कर रहा हूँ, लेकिन 2 बातें मैंने देखा है:

1: "deploy": "NODE_ENV=production webpack -p" seens नहीं है सही, जब आप इसे विकसित करने और तैनाती के लिए बना रहे हैं तो आपको चर सेट करना होगा और यहां आप इसे सेट नहीं कर रहे हैं।

2: आपको इसे पहले टर्मिनल/कॉमांड प्रॉम्प्ट पर सेट करना होगा।

वेबपैक को कम करने और तैनात करने के लिए यहां एक उदाहरण दिया गया है, आपको थोड़ा सा अनुकूलन करना है, लेकिन मुझे यह आपकी मदद करनी चाहिए।

आप, पहले comand शीघ्र पर नोड के लिए इस वातावरण चर सेट खिड़कियों या टर्मिनल में खोलने के मैक में करने के लिए है और:

Mac: export NODE_ENV=production 

Windows: set NODE_ENV=production 

आप विंडोज या मैक में सूची में गूंज जाँच करने के लिए कर सकते हैं यदि चर रहा है जोड़ा।

फिर अपने 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'), 
      ] 
}; 

अपने package.json में आप इस स्क्रिप्ट सेट कर सकते हैं:

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

आप कर रहे हैं मैक आईओएस पर: यदि निर्यात यहां काम नहीं करता है तो इसके बजाय सेट का उपयोग करें, विंडोज़ और मैक से अंतर & & के बाद की जगह है।

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

उपयोग comand NPM रन घड़ी विकास में निर्माण और एक minified संस्करण में उत्पादन के लिए इसे बनाने के लिए चलाने तैनाती NPM करने के लिए।

Answer 2

आप इस devtool: 'cheap-module-source-map',config में जोड़ने की कोशिश कर सकते हैं?

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

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

Answer 3

expects you प्रतिक्रिया उत्पादन बनाता है के लिए 'production' को NODE_ENV स्थापित करने के लिए है, और बदसूरत कर देना के माध्यम से इसे चलाने के लिए - इस अतिरिक्त शब्दाडंबर, सांत्वना प्रवेश, आदि का एक बहुत से छुटकारा मिलता है जब webpack के माध्यम से निर्माण आपको लगता है कि वातावरण चर सेट सुनिश्चित करें (उदाहरण के लिए कमांड लाइन पर NODE_ENV=production webpack)।

Answer 4

मेरे पास सिर्फ प्रतिक्रिया/प्रतिक्रिया डोम और एक हैलो वर्ड रिएक्ट घटक के साथ एक रेपो सेटअप है। विक्रेता.जेएस फ़ाइल 18 9 केबी है।

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 

नोट: मैं एक 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" 
    }, 

Answer 5

मैं अत्यधिक Webpack बंडल विश्लेषक का उपयोग की सलाह देते हैं अपने बंडल छोटा करने के लिए (https://github.com/th0r/webpack-bundle-analyzer) के माध्यम से नोड ENV सेट कर रहा हूं। आप देख सकते हैं कि आपका बंडल इतना बड़ा क्या कर रहा है। आप सभी फायरबेस, लॉनाश और jquery का भी उपयोग कर सकते हैं। webpack प्लगइन्स में:

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

अपने आयात में:

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

लिए webpack उत्पादन प्लग इन का उपयोग करने के अलावा, उपेक्षा आप जो कुछ भी उपयोग नहीं कर रहे हैं और आयात केवल तुम इतनी तरह की जरूरत है क्या उपयोग करने का प्रयास

import find from 'lodash/find' 

तुम भी jQuery कस्टम बना सकते हैं और साथ ही बनाता है: lodash, केवल अपनी वांछित या एक कस्टम निर्माण (https://lodash.com/custom-builds) बनाने के आयात करते हैं।