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

BEARBEITEN

Ich bin nicht sicher, wenn Sie auf Mac/IOs oder Windows, aber 2 Dinge habe ich bemerkt:

1: "deploy": "NODE_ENV=production webpack -p" nicht seens korrekt ist, müssen Sie die variable, wenn Sie 're building it für die Entwicklung und für die Bereitstellung und werden Sie hier nicht einstellen.

2: Sie müssen zuvor legen Sie es auf dem terminal/comand prompt.

Geht hier ein Beispiel für webpack verkleinern und bereitstellen, Sie müssen sich ein bisschen, aber ich hp das sollte dir helfen.

Müssen Sie zuerst diese enviroment Variablen für Knoten auf comand prompt, öffnen Sie Sie in windows oder terminal in mac und:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

Können Sie echo in windows oder Liste im mac zu überprüfen, wenn die variable wurde Hinzugefügt.

Dann in Ihre 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 Paket.json-Sie können diese Skripts:

Wenn Sie auf 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"
    }

Wenn Sie auf Mac IOS:
Wenn der export funktioniert hier nicht verwenden, statt, der Unterschied von windows und mac ist das Leerzeichen 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"
    }

Den Einsatz der comand npm-run Uhr zu bauen, die in der Entwicklung und npm führen Sie die Bereitstellung, um es zu bauen für die Produktion in einer minified version.

Habe ich ein repo-setup mit nur Reagieren /Reagieren Dom und ein Hello Word Reagieren Komponente. Die vendor.js Datei 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 werde die KNOTEN ENV über einen NPM-Skript

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

Reagieren erwartet Sie zu setzen NODE_ENV zu 'production' für die Produktion baut, und führen Sie es durch Verunstalten -- dieser entledigt sich eine Menge zusätzlicher Ausführlichkeit, console logging, etc. Stellen Sie sicher, dass Sie, dass die Umgebungsvariable, wenn Gebäude über webpack (z.B. NODE_ENV=production webpack auf der Kommandozeile).