CODEWITHSUNDEEP
reactjsecmascript-6webpackbabeljs
Michael Ramos
Michael Ramos

Reputation: 5817

Webpack - misunderstanding and large bundles

I'm having a hard time setting up a proper Webpack config. My development bundle.js comes out to 14.6mb, while my production is 23mb. The size of my source is only 455kb (js, css, images)... So this seems to be way off, let alone the production being bigger than the dev bundle. Also some images seem to get distorted/stretched out. I can not truly understand what is going on (yes I've spent much time on google for this) or how to properly setup my Webpack config for proper optimization.

Edit 1 This seems to be an issue with Uglify. When I take it out, the build is at 6MB.

Edit 2 Optimized the build and got it down to 2mb, still working for a more efficient solution

var path = require('path');
var webpack = require('webpack');
var merge = require('merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpackConfig = {
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

if (process.env.NODE_ENV === 'production') {

  webpackConfig = merge(webpackConfig,{
    devtool: "source-map",
    entry : [
      './src/client/index.js'
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname
      },
      { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') }
    ]},
    plugins : [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new ExtractTextPlugin("app.css"),
      new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]  
  });

}else{

  webpackConfig = merge(webpackConfig,{
    devtool: 'inline-source-map',
    module: {
      loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname,
        query: {
          optional: ['runtime'],
          stage: 2,
          env: {
            development: {
              plugins: [
                'react-transform'
              ],
              extra: {
                'react-transform': {
                  transforms: [{
                    transform:  'react-transform-hmr',
                    imports: ['react'],
                    locals:  ['module']
                  },
                  {
                    transform: 'react-transform-catch-errors',
                    imports: ['react','redbox-react' ]
                  }
                ]}
              }
            }
          }
        }
      },
      { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]},
    entry : [
      'webpack-hot-middleware/client',
      './src/client/index.js'
    ],
    plugins : [
      new webpack.HotModuleReplacementPlugin()
    ]  
  });

}

module.exports = webpackConfig;

Webpack-Bundle-Size-Analyzer: 

plotly.js: 2.59 MB (46.6%)
  <self>: 2.59 MB (100%)
react: 590.99 KB (10.4%)
  <self>: 590.99 KB (100%)
lodash: 481.66 KB (8.46%)
  <self>: 481.66 KB (100%)
react-bootstrap: 275.43 KB (4.84%)
  <self>: 275.43 KB (100%)
leaflet: 217.5 KB (3.82%)
  <self>: 217.5 KB (100%)
core-js: 154.18 KB (2.71%)
  <self>: 154.18 KB (100%)
immutable: 139.19 KB (2.44%)
  <self>: 139.19 KB (100%)
react-leaflet: 100.1 KB (1.76%)
  <self>: 100.1 KB (100%)
react-router: 72.15 KB (1.27%)
  <self>: 72.15 KB (100%)
lodash-compat: 67.98 KB (1.19%)
  <self>: 67.98 KB (100%)
react-overlays: 63.65 KB (1.12%)
  react-prop-types: 2.94 KB (4.61%)
    <self>: 2.94 KB (100%)
  <self>: 60.72 KB (95.4%)
history: 46.16 KB (0.810%)
  <self>: 46.16 KB (100%)
buffer: 41.91 KB (0.736%)
  isarray: 132 B (0.308%)
    <self>: 132 B (100%)
  <self>: 41.78 KB (99.7%)
fbjs: 34.35 KB (0.603%)
  <self>: 34.35 KB (100%)
validator: 30.66 KB (0.538%)
  <self>: 30.66 KB (100%)
redux-router: 21.57 KB (0.379%)
  <self>: 21.57 KB (100%)
regenerator: 20.92 KB (0.367%)
  <self>: 20.92 KB (100%)
redux: 18.43 KB (0.324%)
  <self>: 18.43 KB (100%)
react-redux: 18.08 KB (0.317%)
  <self>: 18.08 KB (100%)
react-proxy: 16.81 KB (0.295%)
  <self>: 16.81 KB (100%)
dom-helpers: 15.56 KB (0.273%)
  <self>: 15.56 KB (100%)
redbox-react: 15.55 KB (0.273%)
  object-assign: 896 B (5.63%)
    <self>: 896 B (100%)
  <self>: 14.68 KB (94.4%)
whatwg-fetch: 9.69 KB (0.170%)
  <self>: 9.69 KB (100%)
uncontrollable: 8.71 KB (0.153%)
  <self>: 8.71 KB (100%)
error-stack-parser: 7.99 KB (0.140%)
  <self>: 7.99 KB (100%)
webpack-hot-middleware: 7.33 KB (0.129%)
  strip-ansi: 161 B (2.15%)
    <self>: 161 B (100%)
  ansi-regex: 145 B (1.93%)
    <self>: 145 B (100%)
  <self>: 7.03 KB (95.9%)
redux-undo: 7.29 KB (0.128%)
  <self>: 7.29 KB (100%)
redux-logger: 6.48 KB (0.114%)
  <self>: 6.48 KB (100%)
babel-runtime: 5.38 KB (0.0945%)
  <self>: 5.38 KB (100%)
style-loader: 5.38 KB (0.0944%)
  <self>: 5.38 KB (100%)
react-prop-types: 5.18 KB (0.0910%)
  <self>: 5.18 KB (100%)
deep-equal: 3.8 KB (0.0668%)
  <self>: 3.8 KB (100%)
react-transform-hmr: 3.6 KB (0.0633%)
  <self>: 3.6 KB (100%)
base64-js: 3.49 KB (0.0613%)
  <self>: 3.49 KB (100%)
stackframe: 3.4 KB (0.0597%)
  <self>: 3.4 KB (100%)
keycode: 2.67 KB (0.0470%)
  <self>: 2.67 KB (100%)
react-transform-catch-errors: 2.66 KB (0.0467%)
  <self>: 2.66 KB (100%)
process: 2.01 KB (0.0353%)
  <self>: 2.01 KB (100%)
ieee754: 2.01 KB (0.0352%)
  <self>: 2.01 KB (100%)
warning: 1.76 KB (0.0310%)
  <self>: 1.76 KB (100%)
invariant: 1.48 KB (0.0260%)
  <self>: 1.48 KB (100%)
query-string: 1.44 KB (0.0253%)
  <self>: 1.44 KB (100%)
react-deep-force-update: 1.26 KB (0.0222%)
  <self>: 1.26 KB (100%)
classnames: 1.08 KB (0.0189%)
  <self>: 1.08 KB (100%)
css-loader: 640 B (0.0110%)
  <self>: 640 B (100%)
redux-thunk: 375 B (0.00643%)
  <self>: 375 B (100%)
webpack: 251 B (0.00430%)
  <self>: 251 B (100%)
babel-core: 247 B (0.00424%)
  <self>: 247 B (100%)
global: 243 B (0.00417%)
  <self>: 243 B (100%)
isomorphic-fetch: 233 B (0.00400%)
  <self>: 233 B (100%)
strict-uri-encode: 182 B (0.00312%)
  <self>: 182 B (100%)
react-dom: 63 B (0.00108%)
  <self>: 63 B (100%)
<self>: 502.91 KB (8.83%)

Upvotes: 2

Views: 902

Answers (1)

Roman Pushkin
Roman Pushkin

Reputation: 6079

I don't know too much about images in your package. But javascript (or any other text) files can be minified and gzipped. Minification should be done via webpack, and gzip is the feature of your web server.

I also do not recommend to include any images to your javascript bundle.js, it's not a good practice.

So basically solution is:

  1. Minify js files
  2. Enable gzip feature for js files
  3. Remove images from your js/css

Upvotes: 1

Related Questions