CODEWITHSUNDEEP
node.jsnpmwebpack
Michael Nelles
Michael Nelles

Reputation: 6032

Webpack 4 "size exceeds the recommended limit (244 KiB)"

I have two files which are combined under 600 bytes (.6kb) as below.

So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage the size of it?

src file index.js

import _ from 'lodash';
import printMe from './print.js';


  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'click and check console';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

src file print.js

export default function printMe() {
  consoe.log('Called from print.js');
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print:'./src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "my-webpack-4-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "mode": "development",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "express": "^4.16.3",
    "lowdash": "^1.2.0"
  }
}

Warning message:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.bundle.js (964 KiB)

Upvotes: 137

Views: 190778

Answers (10)

Piyali
Piyali

Reputation: 182

For me, code-splitting and adding 'CompressionPlugin' reduced the webpack size form 1.51 MiB to 350 KiB

new CompressionPlugin({
      filename: "[path][base].br",
      algorithm: "brotliCompress",
      test: /\.(js|jsx|css|html|svg|png|jpg|jpeg)$/,
      compressionOptions: {
        params: {
          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
        },
      },
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: true,
    })

install the zlib library also

Upvotes: 1

Goran_Ilic_Ilke
Goran_Ilic_Ilke

Reputation: 868

The main problem is devtool: 'inline-source-map' in webpack.common.js file in your case, in my case I use in development 'cheap-module-eval-source-map', this devtool is very nice for development mode but make my bundle.js to 4.2MiB, so, in production mode in webpack.prod.js file I change devtool like this:

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: false
    },
    devtool: 'source-map'
});

and now from 4.2mb I've got 732KiB of bundle.js. This devtool will slow down process of bundling for few more seconds but will remarkably reduce the size of the file, in my example from 4.18 MiB to 732 KiB.

Upvotes: 3

fathima ashba
fathima ashba

Reputation: 21

Add this to your webpack.config.js. It should work.

performance: {
  hints: false,
  maxEntrypointSize: 512000,
  maxAssetSize: 512000
},

Upvotes: 2

Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

This happens because webpack is bundling all your code dependencies. And as you are using lodash, so lodash minified version will be added to your source code. Plus you are including the source maps:

devtool: 'inline-source-map',

While this should be fine for debug, there is no reason to include your source maps in a Prod build. So some things that you can do to reduce your bundle size.

  1. Make sure to set properly the mode: flag inside your webpack config. You can put either mode: 'development', or mode: 'production'. This will hint webpack about what kind of build you are doing so it will give you the proper warnings.
  2. Make sure to not include source maps on your prod build
  3. Avoid overusing external dependencies that you don't need and make.

Sometimes even these things will not bring your bundle size to below 244kb, what you can do in these cases is to split your bundle and start to use logical chunks. First of all, you can easily separate your js from your styesheets by using the mini css extract plugin.

Another technique that you can use are dynamic imports.

Dynamic Imports: Split code via inline function calls within modules

This will allow you to break your code logically into modules tied to the screens so only the required libraries will be loaded. For more info about dynamic imports, you can check the official documentation. https://webpack.js.org/guides/code-splitting/

Upvotes: 71

GWorking
GWorking

Reputation: 4341

For me, this was solved as said by others eliminating devtool in production

The code of webpack.config.js 

module.exports = (env, argv) => {
  const mode = argv.mode || 'development'

  const config = {
    entry: './src/index.js',
    output: {
      path: `${__dirname}/lib`,
      filename: 'index.js',
      library: 'my-library',
      libraryTarget: 'umd',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
      ],
    },
    devtool: mode === 'development' ? 'cheap-module-eval-source-map' : false,
  }
  return config
}

Upvotes: 1

Patryk
Patryk

Reputation: 338

Nuxt solution nuxt.config.js:

module.exports = {
 build: {
  extend(config, { isDev , isClient }) {
    if (isClient && !isDev) {
      config.optimization.splitChunks.maxSize = 250000
    }
  }
 }
}

Upvotes: 3

Varun Kumar
Varun Kumar

Reputation: 2751

set mode flag to development/production in webpack.config.js. Example:

var mode = process.env.NODE_ENV || 'development';
module.exports = {
    ...
    devtool: (mode === 'development') ? 'inline-source-map' : false,
    mode: mode,
    ...
}

Upvotes: 11

Tony
Tony

Reputation: 311

Add the below line in your vue.config.js file. It is because of the size. We need to split into chunks.

configureWebpack:{
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
}

This may help somebody.

Upvotes: 20

Riyadh Ahmed
Riyadh Ahmed

Reputation: 1299

Simply use below code in webpack.config.js : 

 performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
}

or follow

You can create multiple config file for (development, production). In dev config file use devtool or others necessary dev configuration and vice versa .

you have to use webpack-merge package and config package.json scripts code like

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "webpack --open --config webpack.dev.js",
 "dev": "webpack-dev-server --mode development --open",
 "build": "webpack --config webpack.prod.js"
 },

For example :

create a file webpack.common.js

// webpack.common.js

  use your common configuration like entry, output, module, plugins,

Create webpack.dev.js

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
    contentBase: './dist'
 }
});

Create webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    }
});

Upvotes: 114

Alee
Alee

Reputation: 760

I had the same problem. My bundle file was (1.15 MiB). In my webpack.config.js, replacing :

devtool: 'inline-source-map'

by this line:

devtool: false,

takes my bundle file size from 1.15 MiB to 275 Kib.

Or create 2 separate webpack config files. One for dev and one for prod. In the prod webpack config file, delete the devtool option.

Upvotes: 17

Related Questions