CODEWITHSUNDEEP
javascriptreactjswebpackfrontendbabeljs
Nir Kogman
Nir Kogman

Reputation: 131

bundle.js too big in webpack project

I'm trying to create a react + babel + webpack project. it works, but the bundle.js file is 950KB big.

is bundle.js always that big? if not, how do i reduce the size?

this is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        query:
        {
            presets: ["es2015", 'react']
        }
      }
    ]
}
};

module.exports = config;

Upvotes: 5

Views: 7751

Answers (4)

Roman
Roman

Reputation: 21757

I have webpack 6.0.1 and recently have discovered that documentation for webpack are changed. I tested, use and can suggest the following configuration ideas for webpack.config.js. You can try these ideas and reduce the bundle size:

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
  plugins : [
    ...
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 4
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  ...

  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      cacheGroups: {
        commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
        }
      },
      minSize: 30000,
      maxAsyncRequests: 5,
      maxAsyncRequests: 3,      
    },
    noEmitOnErrors: true,
    minimize: true, 
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ],
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,    
  },
...
}

Comments:

  1. webpack.optimize.ModuleConcatenationPlugin() - concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser
  2. webpack.HashedModuleIdsPlugin() - cause hashes to be based on the relative path of the module, generating a four character string as the module id
  3. webpack.optimize.OccurrenceOrderPlugin() - vary the distribution of the ids to get the smallest id length for often used ids
  4. webpack.NoEmitOnErrorsPlugin() - skip the emitting phase whenever there are errors while compiling. This ensures that no assets are emitted that include errors

Upvotes: 0

Tholle
Tholle

Reputation: 112777

It largely depends on your dependencies. You can ignore ie8 and dedupe your dependencies to shave of some kBs:

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    })
  ]
};

Upvotes: 5

B Λ R T
B Λ R T

Reputation: 174

There are usually lots of dependencies included so this size isn't anything uncommon. Try using following flags when generating your bundle:

--optimize-minimize - Minifies bundle

--optimize-occurrence-order - Optimizes chunk IDs

--optimize-dedupe - Deduplicates same pieces of code

More on the topic here.

Upvotes: 3

Gabri T
Gabri T

Reputation: 454

you can always try to use a javascript "minify" tool. It compresses optimize your code. Search on google for javascript minify.

Upvotes: -2

Related Questions