javascript - script - Webpack: ¿Cómo optimizar el bundle.js generado? Es demasiado grande en mi caso

webpack html loader

Question

Soy nuevo en Webpack. Intento usar Webpack por dos razones principales:

• Gestión de componentes: utilizando require(...)
• Rendimiento: menor tamaño posible, menos solicitudes posibles para el servidor.

Pero con la aplicación que acabo de comenzar (actualmente hay algo así como solo cuatro componentes React), el archivo bundle.js generado por Webpack es de 3.87Mb.

Estoy bastante seguro de que Webpack incluye cosas que nunca necesitaré. Me gustaría saber cómo optimizar el archivo generado ... ¿Cómo "depuro" el proceso de Webpack?

Mi 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})
    ]

};

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

¿Alguna ayuda sobre cómo optimizar el bundle.js generado?

Answer 1

Agregue esto en su archivo de configuración de producción:

plugins: [
    new webpack.DefinePlugin({
      ''process.env'': {
        // This has effect on the react lib size
        ''NODE_ENV'': JSON.stringify(''production''),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [//.min/.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^/.//locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: //.js$|/.css$|/.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

Answer 2

simplemente

webpack --production
or
webpack -p

eche un vistazo a http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html