Почему мои webpack bundle.js и vendor.bundle.js такие невероятно большие?

ИЗМЕНИТЬ

Я не уверен, используете ли вы Mac/IO или Windows, но я заметил 2 вещи:

1: "deploy": "NODE_ENV=production webpack -p" не видит правильно, вы должны установить переменную, когда вы создаете ее для разработки и для развертывания, а здесь вы ее не устанавливаете.

2: Вы должны предварительно установить его в терминале/командной строке.

Вот пример для минимизации и развертывания веб-пакета, вам нужно немного адаптироваться, но я надеюсь, что это должно вам помочь.

Сначала вы должны установить эту переменную среды для узла в командной строке, открыть ее в Windows или терминале в Mac и:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

Вы можете повторить в окнах или список в Mac, чтобы проверить, была ли добавлена ​​​​переменная.

Затем в вашем 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"
    }

Если вы используете Mac IOS: если экспорт здесь не работает, используйте set вместо этого, отличие от Windows и Mac заключается в пробеле после &&.

"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 для сборки для производства в уменьшенной версии.

Я настоятельно рекомендую использовать Webpack Bundle Analyzer, чтобы сделать ваш пакет меньше (https://github.com/th0r/webpack-bundle-analyzer). Вы можете видеть, что делает ваш пакет таким большим. Вы также можете использовать все firebase, lodash и jquery. В дополнение к использованию производственных плагинов веб-пакета, попробуйте игнорировать все, что вы не используете, и импортировать только то, что вам нужно, например: В плагинах веб-пакета:

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

В вашем импорте:

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

Для lodash импортируйте только то, что вам нужно, или создайте собственную сборку (https://lodash.com/custom-builds):

import find from 'lodash/find' 

У меня есть настройка репо только с React/React Dom и компонентом Hello Word React. Размер файла vendor.js составляет 189 КБ.

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

Примечание. Я устанавливаю NODE ENV с помощью сценария 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"
  },

Можете ли вы попробовать добавить это devtool: 'cheap-module-source-map', в config?

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

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

React ожидает, что вы установите NODE_ENV на 'production' для рабочих сборок и запустите их через Uglify — это избавляет от лишнего многословия, ведения журнала консоли и т. д. Убедитесь, что вы установили эту переменную среды при сборке через веб-пакет (например, NODE_ENV=production webpack в командной строке).