Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack : How to optimize the generated bundle.js? It's way too big in my case

I'm new to Webpack. I try to use Webpack for two main reasons :

  • Component management : using require(...)
  • Performance : smallest size possible, less requests possible to the server.

But with the application I just started (there are currently something like four React components only ), the bundle.js file generated by Webpack is 3.87Mb!!!

I'm pretty sure Webpack bundles things I won't ever need. I'd like to know how to optimize the generated file... How do I "debug" Webpack's process?

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

};

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

Any help on how to optimize the generated bundle.js?

like image 477
electrotype Avatar asked Jul 16 '15 00:07

electrotype


People also ask

How do I reduce bundle size in webpack?

Using Production Mode in Webpack. Running your project in production mode reduces the bundle sizes compared to the development mode. Webpack provides a separate flag ( -p ) to enable this feature and removes all the white spaces and newlines in the code.

How do you reduce bundle size in order to increase performance in react?

Every React developer should add compression to their bundling process. One of the most impactful techniques to reduce the bundle size of a React application is compression. compression is a process in which the size of a file is reduced by re-encoding the file data to use fewer bits of storage than the original file.


2 Answers

simply

webpack --production
or
webpack -p

take a look at http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

like image 134
Whisher Avatar answered Oct 07 '22 13:10

Whisher


Add this in your production config file:

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
    })
  ],
like image 33
Khalid Azam Avatar answered Oct 07 '22 13:10

Khalid Azam