title: Webpack 4 "size exceeds the recommended limit (244 KiB)"
body: <p>I have two files which are combined under 600 bytes (.6kb) as below.</p>
  
  <p>So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage the size of it?</p>
  
  <p>src file index.js</p>
  
  <pre><code>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());
  </code></pre>
  
  <p>src file print.js</p>
  
  <pre><code>export default function printMe() {
    consoe.log('Called from print.js');
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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')
    }
  };
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "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\" &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>Warning message:</p>
  
  <blockquote>
    <p>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)</p>
  </blockquote>