Webpack : so optimieren Sie die erzeugte bundle.js? Es ist viel zu groß in meinem Fall

Ich bin neu Webpack. Ich versuche es mal mit Webpack für zwei Hauptgründe :

  • - Komponente-management: require(...)
  • Leistung : kleinste Größe möglich, weniger Anfragen möglich auf den server.

Aber mit der Anwendung, die ich gerade erst begonnen (es gibt derzeit so etwas wie vier Reagieren nur Bestandteile ), die bundle.js - Datei generiert Webpack ist 3.87 Mb!!!

Ich bin mir ziemlich sicher, Webpack-bundles Dinge, die ich nicht ständig brauche. Ich würde gerne wissen, wie die Optimierung der generierten Datei... Wie muss ich "debug" Webpack s Prozess?

Meine webpack.config.js :

var webpack = require("webpack");

module.exports = {
    entry: "./app/bootstrap.js",
    output: {
        path: __dirname,
        publicPath: "/public/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                include: /vis/,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg|jpeg|bmp)(\?.*$|$)/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]

};

sowie package.json :

{
  "name": "XXXXX",
  "version": "1.0.0",
  "main": "",
  "scripts": {
    "dev": "webpack --progress --colors --watch --devtool eval",
    "prod": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "alt": "^0.16.10",
    "bootstrap": "^3.3.5",
    "es6-promise": "^2.3.0",
    "i18next-client": "^1.10.2",
    "jquery": "^1.10.2",
    "react": "^0.13.3",
    "react-router": "^0.13.3",
    "toastr": "^2.1.0",
    "vis": "^4.4.0"
  },
  "devDependencies": {
    "css-loader": "^0.15.1",
    "babel-core": "^5.6.18",
    "babel-loader": "^5.3.1",
    "es6-module-loader": "^0.17.3",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.4",
    "node-libs-browser": "^0.5.2",
    "webpack": "^1.9.13",
    "url-loader": "^0.5.6",
    "style-loader": "^0.12.3",
    "webpack-dev-server": "^1.9.0"
  }
}

Jede Hilfe, die zur Optimierung der generierten bundle.js?

  • Hallo, vielen Dank für Ihre Frage und die Antworten. Ich habe das gleiche problem. Hast du mehr entdecken Sachen, die Sie teilen können?
InformationsquelleAutor electrotype | 2015-07-16
Schreibe einen Kommentar