Large build size in production

[benhunt29]

Any idea why I'm getting such a large vendor bundle size (1.24MB) when including this library? Using webpack-bundle-analyzer shows this library is the main contributor to the large file size.

I'm using webpack 2 and here's my config. I'm relatively new to webpack and definitely new to this library so please forgive me if I'm doing something stupid.

const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
const WebpackMd5Hash = require('webpack-md5-hash')

const sourcePath = path.join(__dirname, './src')

module.exports = function (env) {
  const nodeEnv = env && env.prod ? 'production' : 'development'
  const isProd = nodeEnv === 'production'
  const cssOutputPath = isProd ? './styles/[name].[hash].css' : './styles/[name].css'
  const ExtractCSS = new ExtractTextPlugin(cssOutputPath)

  const plugins = [
    new webpack.EnvironmentPlugin({
      NODE_ENV: nodeEnv
    }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html')
    }),
    new CommonsChunkPlugin({
      name: 'vendor',
      minChunks: ({ resource }) => /node_modules/.test(resource)
    }),
    new webpack.optimize.CommonsChunkPlugin('manifest'),
    new WebpackMd5Hash()
  ]

  const scssLoader = isProd ? ExtractCSS.extract([
    'css-loader',
    'sass-loader'
  ]) : [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]

  const cssLoader = isProd ? ExtractCSS.extract([
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 1,
        localIdentName: '[name]--[local]--[hash:base64:8]'
      }
    },
    'postcss-loader'
  ]) : [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 1,
        localIdentName: '[name]--[local]--[hash:base64:8]'
      }
    },
    'postcss-loader'
  ]

  if (isProd) {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          screw_ie8: true,
          conditionals: true,
          unused: true,
          comparisons: true,
          sequences: true,
          dead_code: true,
          evaluate: true,
          if_return: true,
          join_vars: true
        },
        output: {
          comments: false
        }
      }),
      ExtractCSS
    )
  } else {
    plugins.push(
      new webpack.HotModuleReplacementPlugin()
    )
  }

  return {
    devtool: isProd ? 'source-map' : 'eval',
    context: sourcePath,
    entry: {
      app: './app/index.js'
    },
    output: {
      path: path.join(__dirname, './dist'),
      filename: './scripts/[name]-[hash].js',
      chunkFilename: './scripts/[name]-[hash].js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
          exclude: /node_modules/,
          use: {
            loader: 'url-loader',
            options: { limit: 10000 }
          }
        },
        {
          test: /\.scss$/,
          use: scssLoader
        },
        {
          test: /\.css$/,
          use: cssLoader
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [
            'babel-loader'
          ]
        }
      ]
    },
    resolve: {
      extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx', '.scss', '.css'],
      modules: [
        path.resolve(__dirname, 'node_modules'),
        sourcePath
      ]
    },

    plugins,

    performance: isProd && {
      maxAssetSize: 100,
      maxEntrypointSize: 300,
      hints: 'warning'
    },

    stats: {
      colors: {
        green: '\u001b[32m'
      }
    },

    devServer: {
      contentBase: './',
      historyApiFallback: true,
      port: 3000,
      compress: isProd,
      inline: !isProd,
      hot: !isProd,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          secure: false
        },
        stats: {
          assets: true,
          children: false,
          chunks: false,
          hash: false,
          modules: false,
          publicPath: false,
          timings: true,
          version: false,
          warnings: true,
          colors: {
            green: '\u001b[32m'
          }
        }
      }
    }
  }
}

[prescottprue]

Are you sure that you are doing a -p build of webpack (i.e. NODE_ENV is "production")?

The built version of the library is only roughly 750kb unminified and 440kb minified, so it shouldn't increase your bundle size to that degree.

Going to create a project using webpack 2 and see if I can replicate the size.

[benhunt29]

Yep, I've confirmed that inside my webpack config process.env.NODE_ENV is indeed 'production'

[prescottprue]

@benhunt29 Which version are you using?

Going to attempt to build similarly and analyze it myself. Guessing it may be due to immutable and firebase being included in the bundle that is being included as well (they are dependencies). It might

Plans for v2.0.0 include removing the usage of immutable, which should help considerably. Other than that, totally open to suggestions for shrinking the size.

[benhunt29]

@prescottprue I'm using 1.4.0-beta.3. Thanks for looking into this!

[prescottprue]

Currently

@benhunt29 I used the bundle analyzer myself, and it yielded the following from the minified bundle:

Plan

Removing immutable (as is the plan in v2.0.0) should help to shrink the size, but I think it is still mostly Firebase.

Maybe there is a way to modify your webpack config to point directly to the source or es5ified source (the js:next, module, or main fields of the package file) so that dependencies do not count for the size of the library itself.

v1.4.0-rc.1 includes the build:size npm script (run using npm run build:size) that generates the size report shown above. I am planning on using this script to measure any progress on shrinking bundle size.

Will continue to post any updates.

[prescottprue]

Just as an update: v1.4.0-rc.2 might also shrink the size just a bit.

It would be good to know what relative size you are aiming for as well (keeping in mind that this includes firebase's library as well).

[benhunt29]

great, I'll check it out. thanks!

[prescottprue]

v1.4.0 has been released with these size improvements and npm run build:size command (for checking the size of dependencies).

For those planning on posting another issue on shrinking size in the future: Please provide the relative size you are aiming for (please keep in mind that this size includes Firebase's library as well)