Nsryjdtyk

Looking to deploy a create-react-app configuration on Heroku with the following buildpack: https://github.com/mars/create-react-app-buildpack

I've noticed I have a larger build size of 425 kb after being gZipped and my website is really slow on initial load

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? - I have not done this yet:

1. Code Split where I can and use React Loadable (and maybe use
   react-universal-component)


2. Ensure I load only the required modules (ie. import { map } from 'lodash/map';).

Other Solutions I'm reluctant to do

• Use Preact as I don't want to break things :)


• 
  Two Quick Ways To Reduce React App’s Size In Production - It looks like this would require ejecting, and I'm curious if it's worth it?

Namely it adds the following:

new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin(), //minify everything
new webpack.optimize.AggressiveMergingPlugin()//Merge chunks

Build time Gzip - Which I think is already done by create-react-app

My Source Map Explorer - Once again, will try and take down Firebase, remove Lottie, and import only necessary modules

Heroku Build Logs

-----> React.js (create-react-app) multi app detected

-----> Configure create-react-app build environment

       Using `NODE_ENV=development`

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git

=====> Detected Framework: Multipack

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git

=====> Detected Framework: Node.js

-----> Creating runtime environment



       NPM_CONFIG_LOGLEVEL=error

       NPM_CONFIG_PRODUCTION=false

       NODE_VERBOSE=false

       NODE_ENV=production

       NODE_MODULES_CACHE=true

-----> 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

-----> Restoring cache

       Loading 2 from cacheDirectories (default):

       - node_modules

       - bower_components (not cached - skipping)

-----> Building dependencies

       Installing node modules (package.json + package-lock)

       up to date in 14.708s

-----> Caching build

       Clearing previous node cache

       Saving 2 cacheDirectories (default):

       - node_modules

       - bower_components (nothing to cache)

-----> Pruning devDependencies

       Skipping because NPM_CONFIG_PRODUCTION is 'false'

-----> Build succeeded!

=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git

=====> Detected Framework: React.js (create-react-app)

       Using existing `static.json`

       Enabling runtime environment variables

-----> Build succeeded!

=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git

=====> Detected Framework: React.js (create-react-app)

       Using existing `static.json`

       Enabling runtime environment variables

> journey-client@0.1.0 build /tmp/build_127125dc8ce0d7d71d8f78fe226cf544

> npm run build-css && react-scripts build

> journey-client@0.1.0 build-css /tmp/build_127125dc8ce0d7d71d8f78fe226cf544

> 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

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git

=====> Detected Framework: Static HTML

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

-----> Installed directory to /app/bin

Using release configuration from last framework (Static HTML).

-----> Discovering process types

       Procfile declares types     -> (none)

       Default types for buildpack -> web

-----> Compressing...

       Done: 92.5M

-----> Launching...

       Released v94

1. 
   

   Only use packages that you are required to use. If you have packages of substantial size, only include the modules you require:

   
   
   

   import 'firebase/auth';
   import 'firebase/firestore';
   import isEqual from 'lodash.isequal';

   
   



2. Use something like Gatsby.js which handles code splitting for you!




3. Utilize practices like code splitting with next.js, react-loadable or other.




4. Use a Server-Side Rendering Solution