wake-up-neo.com

Warum sind meine Webpacks bundle.js und vendor.bundle.js so unglaublich groß?

Alle meine React-Projekte sind in der Regel unglaublich groß (Bundle.js ist 4,87 MB und vendor.bundle.js 2,87 MB). Ich habe keine Ahnung, warum es so groß ist. Ich habe bereits uglifyJS an, aber das scheint nicht viel zu helfen (5.09> 4.87mb und 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;

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

Hat jemand eine Idee, wie man das beheben kann?

9
ervazu

EDIT

Ich bin nicht sicher, ob Sie mit Mac/IOs oder Windows arbeiten, aber zwei Dinge, die ich bemerkt habe:

1: "deploy": "NODE_ENV=production webpack -p" wird nicht korrekt angezeigt. Sie müssen die Variable festlegen, wenn Sie sie zum Entwickeln und Bereitstellen erstellen. Hier legen Sie sie nicht fest.

2: Sie müssen es vorher am Terminal/comand Prompt einstellen.

Hier ein Beispiel für das Webpack minify und deploy, Sie müssen sich ein wenig anpassen, aber ich sollte Ihnen helfen.

Sie müssen zuerst diese Umgebungsvariable für den Knoten bei comand Prompt einstellen, sie in Windows oder im Terminal in Mac öffnen und:

Mac: export NODE_ENV=production

Windows: set NODE_ENV=production

Sie können ein Echo in Windows oder eine Liste in Mac ausführen, um zu prüfen, ob eine Variable hinzugefügt wurde.

Dann in Ihrer 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 Ihrer package.json können Sie folgende Skripte setzen:

Wenn Sie mit Windows arbeiten:

"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 mit Mac IOS arbeiten: Wenn der Export hier nicht funktioniert, verwenden Sie stattdessen set. Der Unterschied zu 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"
    }

Verwenden Sie die comand npm run watch, um die Entwicklung zu erstellen, und npm run deploy, um sie für die Produktion in einer reduzierten Version zu erstellen.

4
Vinicius Vieira

Ich würde wärmstens empfehlen, Webpack Bundle Analyzer zu verwenden, um Ihr Paket kleiner zu machen ( https://github.com/th0r/webpack-bundle-analyzer ). Sie können sehen, was Ihr Paket so groß macht. Möglicherweise verwenden Sie auch alle Firebase, Lodash und Jquery. Versuchen Sie neben den Webpack-Produktions-Plugins auch zu ignorieren, was Sie nicht verwenden, und importieren Sie nur das, was Sie so benötigen: In Webpack-Plugins:

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

In Ihren Importen: 

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

Importieren Sie für lodash nur das, was Sie benötigen, oder erstellen Sie einen benutzerdefinierten Build ( https://lodash.com/custom-builds ): 

import find from 'lodash/find' 

Sie können auch benutzerdefinierte Jquery-Builds erstellen.

6
evanjmg

Ich habe ein Repo-Setup mit nur React/React Dom und einer Hello Word React-Komponente. Die Datei vendor.js hat 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 setze den NODE ENV über ein NPM-Skript ein

"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"
  },
2
Tim Arney

Können Sie versuchen, Folgendes hinzuzufügen: __.devtool: 'cheap-module-source-map',in config?

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

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

1
David Guan

React erwartet, dass SieNODE_ENV auf 'production' für Produktions-Builds setzen und es durch Uglify ausführen - dadurch werden viele zusätzliche Ausführlichkeit, Konsolenprotokollierung usw. entfernt. Stellen Sie sicher, dass Sie diese Umgebungsvariable beim Erstellen über Webpack festlegen (zB NODE_ENV=production webpack in der Befehlszeile).

0
Brendan Gannon