Webpack 4 "size exceeds the recommended limit (244 KiB)" : <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>
