title: React with NodeJS and Webpack - bundled js big file size
body: <p>Before anyone downvotes, let me clear some things out what the issue is and which information has been gathered about it:</p>
  
  <h2><strong>Issue:</strong></h2>
  
  <p>I'm currently trying to learn React from this <a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR" rel="nofollow noreferrer">Youtube Tutorial Playlist</a>.
  This guy is really good at explaining the framework, unfortunately the videos are outdated (2016).
  Using his files from the <a href="https://github.com/iamshaunjp/react-playlist/tree/lesson-4" rel="nofollow noreferrer">lesson-4 Github branch</a>, the final transpiled 
  <code>bundle.js</code> file is way smaller in size as mine.</p>
  
  <p>Inspecting both files, I can see that because of the dependencies he used back in 2016 and the updated ones in 2018, the file sizes have changed a lot.
  This results that following Warning messages are displayed in my console after the build:</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:   bundle.js (248 KiB)</p>
    
    <p>WARNING in entrypoint size limit: The following entrypoint(s) combined
    asset size exceeds the recommended limit (244 KiB). This can impact
    web performance. Entrypoints:   main (248 KiB)
          bundle.js</p>
    
    <p>WARNING in webpack performance recommendations: You can limit the size
    of your bundles by using import() or require.ensure to lazy load some
    parts of your application. For more info visit
    <a href="https://webpack.js.org/guides/code-splitting/" rel="nofollow noreferrer">https://webpack.js.org/guides/code-splitting/</a></p>
  </blockquote>
  
  <p>Here is my webpack.config.js file:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    "mode": "production",
  
    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
      path: path.resolve(__dirname, 'dist') + '/app',
      filename: 'bundle.js',
      publicPath: '/app/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          include: path.resolve(__dirname, 'src'),
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015']
          }
        }, {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        }
      ]
    }
  };
  </code></pre>
  
  <p>My /src/app/index.js file:</p>
  
  <pre><code>const React = require("react");
  const ReactDom = require("react-dom");
  
  class TodoComponent extends React.Component {
    render() {
      return (&lt;h1&gt;hello&lt;/h1&gt;);
    }
  }
  ReactDom.render(&lt;TodoComponent/&gt;, document.querySelector(".todo-wrapper"));
  </code></pre>
  
  <p>My package.json file:</p>
  
  <pre><code>{
    "name": "react-tutorial",
    "version": "1.0.0",
    "description": "React tutorial",
    "main": "app.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "npm run build",
      "build": "webpack -d &amp;&amp; webpack-dev-server --content-base src/ --inline --hot --port 1234"
    },
    "author": "me",
    "license": "ISC",
    "dependencies": {
      "react": "^16.4.1",
      "react-dom": "^16.4.1"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "webpack": "^4.16.2",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.1.5"
    }
  }
  </code></pre>
  
  <p>And my /src/index.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;React Tutorial&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="todo-wrapper"&gt;
  
    &lt;/div&gt;
    &lt;h2&gt;Its working i guess&lt;/h2&gt;
  
  &lt;script src="/app/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The transpiled final /dist/app/bundle.js file looks like this:
  <a href="https://jsfiddle.net/8x1mrbow/" rel="nofollow noreferrer">JsFiddle of bundle.js</a> and is 1.7MB big.</p>
  
  <p>I can see that the code part of </p>
  
  <blockquote>
    <p>./node_modules/react-dom/cjs/react-dom.development.js</p>
  </blockquote>
  
  <p>inside <code>bundle.js</code> takes most of the space.</p>
  
  <h2>Solutions:</h2>
  
  <p>After reading up on those links and using Google, I've found following solutions:</p>
  
  <ul>
  <li>Ignore these messages with performance hints false </li>
  <li>minimize and uglify the code Split and/or lazy load the code</li>
  </ul>
  
  <h2>Issue with the solutions:</h2>
  
  <p>Since I just started learning about React and Webpack, I don't feel comfortable having a such big <code>bundle.js</code> file with just a couple of lines in <code>index.js</code>. Is there some gap that I'm missed out or is this the normal case that using React is by default this big and Webpack has to live with it?</p>
  
  <p>I really hope somebody can bring light to this because I've been trying to put my mind at peace on this since yesterday.
  Gladly to provide more information if needed.
  Thanks!</p>