Tại sao webpack bundle.js và vendor.bundle.js của tôi lại cực kỳ lớn?

Question

Tất cả các dự án React của tôi có xu hướng cực kỳ lớn về kích thước tệp (bundle.js là 4,87 mb và vendor.bundle.js là 2,87 mb). Tôi không biết tại sao nó lại lớn thế này. Tôi đã có uglifyJS trên, nhưng điều này dường như không giúp rất nhiều (5,09> 4.87mb và 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 My

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

Có ai có bất kỳ ý tưởng về cách khắc phục điều này?

Answer 1

EDIT

Tôi không chắc chắn nếu bạn đang ở trên máy Mac/iOS hoặc Windows, nhưng 2 điều tôi nhận thấy:

1: "deploy": "NODE_ENV=production webpack -p" không seens đúng, bạn phải đặt biến khi bạn xây dựng nó để phát triển và triển khai và ở đây bạn không đặt nó.

2: Trước đó bạn phải đặt lời nhắc trên thiết bị đầu cuối/dấu nhắc.

Dưới đây là một ví dụ cho webpack rút gọn và triển khai, bạn phải điều chỉnh một chút nhưng tôi làm được điều này sẽ giúp bạn.

Bạn phải thiết lập đầu tiên biến môi trường này cho nút trên cửa sổ COMAND, mở nó trong cửa sổ hoặc thiết bị đầu cuối trong mac và:

Mac: export NODE_ENV=production 

Windows: set NODE_ENV=production 

Bạn có thể vang lên trong cửa sổ hoặc danh sách trong mac để kiểm tra xem biến đã được thêm.

Sau đó, trong webpack.config.js bạn

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

Trong package.json của bạn, bạn có thể thiết lập các kịch bản này:

Nếu bạn đang ở trên 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" 
    } 

Nếu bạn là trên Mac iOS: Nếu xuất không hoạt động ở đây, hãy sử dụng đặt thay thế, sự khác biệt từ cửa sổ và mac là khoảng trắng sau & &.

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

Sử dụng đồng hồ chạy npm comand để xây dựng trong phát triển và chạy npm triển khai để xây dựng để sản xuất trong phiên bản được rút gọn.

Answer 2

Bạn có thể thử thêm số này devtool: 'cheap-module-source-map', trong config?

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

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

Answer 3

Phản ứng expects you thiết NODE_ENV-'production' phục vụ sản xuất xây dựng, và để chạy nó thông qua làm xấu đi - điều này được thoát khỏi rất nhiều tính cách rườm rà thêm, giao diện điều khiển khai thác gỗ, vv Hãy chắc chắn bạn thiết rằng biến môi trường khi xây dựng thông qua webpack (ví dụ: NODE_ENV=production webpack tại dòng lệnh).

Answer 4

Tôi có thiết lập repo chỉ với React/React Dom và thành phần Hello Word React. Tệp vendor.js là 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 

Lưu ý: Tôi đang thiết lập các ENV NODE qua một 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

Tôi rất muốn khuyên bạn sử dụng Webpack Bundle Analyzer để làm bó của bạn nhỏ hơn (https://github.com/th0r/webpack-bundle-analyzer). Bạn có thể thấy điều gì khiến cho nhóm của bạn trở nên quá lớn. Bạn cũng có thể sử dụng tất cả firebase, lodash và jquery. Ngoài việc sử dụng các plugin sản xuất webpack, hãy thử sử dụng bỏ qua bất cứ điều gì bạn không sử dụng, nhập khẩu chỉ những gì bạn cần như vậy: trong plugin webpack:

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

trong nhập khẩu của bạn:

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

Đối lodash, nhập khẩu chỉ những gì bạn cần hoặc thực hiện một tùy chỉnh xây dựng (https://lodash.com/custom-builds):

import find from 'lodash/find' 

bạn cũng có thể tạo jquery tùy chỉnh xây dựng là tốt.