为什么我的webpack bundle.js和vendor.bundle.js如此之大？ [英] Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

问题描述

我的所有React项目的文件大小都非常大（bundle.js是4.87 mb，vendor.bundle.js是2,87 mb）。我不知道为什么这么大。我已经有了uglifyJS，但这似乎没什么帮助（5.09> 4.87mb和2.9> 2.87mb）

All my React projects tend to be incredibly large in file size (bundle.js is 4.87 mb and the vendor.bundle.js is 2,87 mb). I have no idea why it is this large. I already have uglifyJS on, but this doesn't seem to help a lot (5.09 > 4.87mb and 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 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"
  }
}

有没有人知道如何解决这个问题？

Does anyone have any idea on how to fix this?

推荐答案

编辑

我不确定你是使用Mac / IO还是Windows，但我注意到了两件事：

I'm not sure if you are on Mac/IOs or Windows, but 2 things I noticed:

1：deploy：NODE_ENV = production webpack -p查找不正确，你必须在为开发和部署构建变量时设置变量，这里你没有设置它。

1: "deploy": "NODE_ENV=production webpack -p" does not seens correct, you must set the variable when you 're building it for develop and for deploy and here you are not setting it.

2：您必须先在终端/命令提示下设置它。

2: You have to previously set it on the terminal/comand prompt.

这里举个例子对于webpack缩小和部署，你必须适应一点但我希望这可以帮助你。

Here goes a example for webpack minify and deploy, you have to adapt a little bit but I hp this should help you.

你必须首先设置这个环境变量fo r节点在命令提示符下，在Windows中打开它或在mac中终端：和

You have to set first this enviroment variable for node on comand prompt, open it in windows or terminal in mac and:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

您可以在Windows中回显或在mac中列出以检查如果已添加变量。

You can echo in windows or list in mac to check if variable has been added.

然后在您的webpack.config.js中

Then in your 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中你可以设置这个脚本：

In your package.json you can set this scripts:

如果你在Windows上：

If you are on 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"
    }

如果您使用的是Mac IOS：
如果导出在这里使用set不起作用，与windows和mac的区别在于&&和

If you are on Mac IOS: If export does not work here use set instead, the difference from windows and mac is the space after &&.

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

使用命令npm run watch在开发中构建，并使用npm run deploy构建它以便在缩小版本中生成。

The use the comand npm run watch to build in development and npm run deploy to build it for production in a minified version.

这篇关于为什么我的webpack bundle.js和vendor.bundle.js如此之大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！