title: Large Create-React-App Bundle Size - Optimized Production Build
body: <p>Looking to deploy a <code>create-react-app</code> configuration on Heroku with the following buildpack: <a href="https://github.com/mars/create-react-app-buildpack" rel="noreferrer">https://github.com/mars/create-react-app-buildpack</a> </p>
  
  <p>I've noticed I have a larger build size of <strong>425 kb</strong> after being gZipped and my <strong>website is really slow on initial load</strong></p>
  
  <p><strong>Are the following steps decent enough measures to reduce the bundle size? (ie. The best bang for buck precations). If not, what would else would you recommend?</strong> - <em>I have not done this yet:</em></p>
  
  <ol>
  <li>Code Split where I can and use <a href="https://github.com/jamiebuilds/react-loadable" rel="noreferrer">React Loadable</a> (and maybe use
  <a href="https://github.com/faceyspacey/react-universal-component" rel="noreferrer">react-universal-component</a>)</li>
  <li>Ensure I load only the required modules (ie. <code>import { map } from 'lodash/map';</code>).</li>
  </ol>
  
  <hr>
  
  <p><strong>Other Solutions I'm reluctant to do</strong></p>
  
  <ul>
  <li>Use <a href="https://github.com/developit/preact" rel="noreferrer">Preact</a> as I don't want to break things :)</li>
  <li><a href="https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a" rel="noreferrer">Two Quick Ways To Reduce React App’s Size In Production</a> - It looks like this would require ejecting, and I'm curious if it's worth it?</li>
  </ul>
  
  <p>Namely it adds the following: </p>
  
  <p><code>new webpack.optimize.DedupePlugin(), //dedupe similar code 
      new webpack.optimize.UglifyJsPlugin(), //minify everything
      new webpack.optimize.AggressiveMergingPlugin()//Merge chunks</code></p>
  
  <p><code>Build time Gzip</code> - Which I think is already done by <code>create-react-app</code></p>
  
  <hr>
  
  <p><strong>My Source Map Explorer</strong> - Once again, will try and take down Firebase, remove Lottie, and import only necessary modules</p>
  
  <p><a href="https://i.stack.imgur.com/MtIPx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MtIPx.png" alt="I will ensure I remove some modules through specifying better..."></a></p>
  
  <p><strong>Heroku Build Logs</strong></p>
  
  <pre><code>-----&gt; React.js (create-react-app) multi app detected
  -----&gt; Configure create-react-app build environment
         Using `NODE_ENV=development`
  =====&gt; Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
  =====&gt; Detected Framework: Multipack
  =====&gt; Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
  =====&gt; Detected Framework: Node.js
  -----&gt; Creating runtime environment
  
         NPM_CONFIG_LOGLEVEL=error
         NPM_CONFIG_PRODUCTION=false
         NODE_VERBOSE=false
         NODE_ENV=production
         NODE_MODULES_CACHE=true
  -----&gt; Installing binaries
         engines.node (package.json):  unspecified
         engines.npm (package.json):   unspecified (use default)
  
         Resolving node version 8.x...
         Downloading and installing node 8.11.1...
         Using default npm version: 5.6.0
  -----&gt; Restoring cache
         Loading 2 from cacheDirectories (default):
         - node_modules
         - bower_components (not cached - skipping)
  -----&gt; Building dependencies
         Installing node modules (package.json + package-lock)
         up to date in 14.708s
  -----&gt; Caching build
         Clearing previous node cache
         Saving 2 cacheDirectories (default):
         - node_modules
         - bower_components (nothing to cache)
  -----&gt; Pruning devDependencies
         Skipping because NPM_CONFIG_PRODUCTION is 'false'
  -----&gt; Build succeeded!
  =====&gt; Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
  =====&gt; Detected Framework: React.js (create-react-app)
         Using existing `static.json`
         Enabling runtime environment variables
  -----&gt; Build succeeded!
  =====&gt; Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
  =====&gt; Detected Framework: React.js (create-react-app)
         Using existing `static.json`
         Enabling runtime environment variables
  &gt; journey-client@0.1.0 build /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
  &gt; npm run build-css &amp;&amp; react-scripts build
  &gt; journey-client@0.1.0 build-css /tmp/build_127125dc8ce0d7d71d8f78fe226cf544
  &gt; node-sass-chokidar src/ -o src/
  Wrote 2 CSS files to /tmp/build_127125dc8ce0d7d71d8f78fe226cf544/src/
  Creating an optimized production build...
  File sizes after gzip:
    495.27 KB  build/static/js/main.b1129bd4.js
    18.05 KB   build/static/css/main.e2b6d04c.css
  The project was built assuming it is hosted at the server root.
  To override this, specify the homepage in your package.json.
  For example, add this to build it for GitHub Pages:
    "homepage" : "http://myname.github.io/myapp",
  The build folder is ready to be deployed.
  You may serve it with a static server:
    npm install -g serve
    serve -s build
  =====&gt; Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
  =====&gt; Detected Framework: Static HTML
    % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                   Dload  Upload   Total   Spent    Left  Speed
  -----&gt; Installed directory to /app/bin
  Using release configuration from last framework (Static HTML).
  -----&gt; Discovering process types
         Procfile declares types     -&gt; (none)
         Default types for buildpack -&gt; web
  -----&gt; Compressing...
         Done: 92.5M
  -----&gt; Launching...
         Released v94
  </code></pre>