Bundle size increased with plugin?

[michaeljonathanblack]

I added this plugin to the webpack client configuration for https://github.com/wellyshen/react-cool-starter and the bundle size increased. That... doesn't make sense, does it?

Code:

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: isDev,
          babelrc: false,
          presets: [['es2015', { modules: false }], 'react', 'stage-0'],
          plugins: ['lodash', 'react-hot-loader/babel'],
        },
      },

Before:

                 Asset     Size  Chunks                    Chunk Names
      main.1e065c4a.js  13.2 kB       0  [emitted]         main
    vendor.c39007e0.js   474 kB       1  [emitted]  [big]  vendor
     main.649baf33.css  2.81 kB       0  [emitted]         main
  main.1e065c4a.js.map  80.5 kB       0  [emitted]         main
 main.649baf33.css.map  10.8 kB       0  [emitted]         main
vendor.c39007e0.js.map  4.82 MB       1  [emitted]         vendor

After:

     main.05c1a9de.js  22.3 kB       0  [emitted]         main
    vendor.a157e133.js   474 kB       1  [emitted]  [big]  vendor
     main.649baf33.css  2.81 kB       0  [emitted]         main
  main.05c1a9de.js.map   192 kB       0  [emitted]         main
 main.649baf33.css.map  10.8 kB       0  [emitted]         main
vendor.a157e133.js.map  4.82 MB       1  [emitted]         vendor

I was expecting vendor to go down and nothing else to change, really.

Any insight is appreciated!

[michaeljonathanblack]

When using lodash-webpack-plugin (https://github.com/lodash/lodash-webpack-plugin) I was able to reduce the After bundle size down to 17kB, but that's still larger than the original bundle size of 13kB.

After:

                 Asset     Size  Chunks                    Chunk Names
      main.0c46cd59.js  17.2 kB       0  [emitted]         main
    vendor.02065c3a.js   473 kB       1  [emitted]  [big]  vendor
     main.649baf33.css  2.81 kB       0  [emitted]         main
  main.0c46cd59.js.map   135 kB       0  [emitted]         main
 main.649baf33.css.map  10.8 kB       0  [emitted]         main
vendor.02065c3a.js.map  4.81 MB       1  [emitted]         vendor

For reference, this repository appears to be including lodash entirely but only using merge, assign, uniqueId and keys. So there should be plenty of lodash to remove.

[jdalton]

Hi @mherodev!

You might try the webpack slack. Ping TheLarkInn via email for an invite. Or try their gitter chat.

[kachkaev]

Hey @mherodev! Were you able to overcome your issue? Looks like I'm also getting the entire lodash as well as individual modules in a fork of create-react-app.

Part of webpack.config.prod.js:

// ...
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
// ...

          // Process JS with Babel.
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                ['lodash'],
                ['import', [{ libraryName: 'antd', style: true }]],
              ],
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              compact: true,
            },
          },
// ...
  plugins: [
    new LodashModuleReplacementPlugin(),
// ...

A sub-output from source-map-explorer:

(both lodash.js as well as individual modules are in the production bundle)

[fumblehool]

@mherodev @kachkaev @jdalton I'm facing the same issue. How can I solve this issue?

[bnjmnt4n]

Looking at it, this is probably due to a dependency using lodash with require, which is not transformed by the plugin, while your project code imports lodash and will be cherry-picked. Hence both the full lodash file and the individual cherry-picked files will be included. I don't think there's an easy way to fix this to just use individual cherry-picked files.