React-starter-kit: Performance issues with vendor bundles

[ghost]

Hi there! I really love this repo. Really, thanks for all the work.

I started off building an application using this boilerplate (its only static content that's live right now), but performance has suffered.

Given the boilerplate code, I'd love to get input in optimizing compression and reducing build sizes. I'm poking around but would love some feedback.

[Andriy-Kulak]

+1. I have a similar bad performance numbers on my site and I only added a few packages and have a dozen or two components. I noticed that the React Starter Kit website (Screenshot Below) has considerably better numbers (70/100 according to google), using the same boilerplate I assume. Anyone have any ideas?

[buildbreakdo]

@Fahd You have some huge custom font files included in your clientjs that look like they are in base64 format, making them even bigger.

Anywho, compression is partly handled by file hosting services like S3 (make sure to turn gzip on in the bucket configuration on S3) for assets like client.js, vendor.js, custom font files, etc as part of your deploy script you would do an aws s3 upload of the files once a production build has run, when the app runs in production mode you would use your s3 bucket address, dev mode would just use the local public directory.

ExpressJS also has a compression library that is really easy to use. Used to be included in the base project but they pulled it out.

Found here https://github.com/expressjs/compression and works like:
npm install compression --save

// server.js
...
var express     = require('express')
var compression = require('compression')

var app = express()
app.use(compression())
...

You should really only be using this if you do not have a proxy server like Apache or NGINX in front of your node app. Otherwise, you should turn on gzip compression from Apache or NGINX config respectively.

@Andriy-Kulak Caching is set in the response header, so in server.js you would add:

// Server.js
...
res.set('cache-control', 'private, max-age=86400');
...

Which would cache the response for one day (like Google's homepage does, just a generic default). See pull request https://github.com/kriasoft/react-starter-kit/pull/1245 .

[langpavel]

This starter kit is best in isomorphic. Compression should be handled on proxy especially if you scale horizontally. But there are more things you should reach recently and you must deal with.. like any other starter. So it always not be the best dealing with this from beginning

[Andriy-Kulak]

@buildbreakdo @langpavel are there any examples or tutorials on how gzip and host parts of the code on S3 with such an isomorphic app like this? I am relatively new to the topic of optimizing performance so any resources where this is shown in detail, would be greatly appreciated. My app is currently hosted on heroku as that was the easiest way to deploy it, but I will try to move it to AWS at some point again (I failed the first time after trying for a few hours)

Also, I am trying to figure out if I can decrease the amount of dependencies and reduce the size of my project. Is the vendor file in this app equivalent to the bundle.js of what a client side app would have? Mine is 2.2mb and the terminal says that the compressed app is 36.9mb when compressed and deployed. I will be trying to remove dependencies with trial and error and hopefully improve the performance that way as well.

[langpavel]

@Andriy-Kulak

• Express: Production best practices: performance and reliability — all this you can apply in your server.js
• Do you build your app for production? yarn build -- --release (note the double --)
• You can easily see what is included if you run yarn build:stats, following image is for feature/react-intl branch:
  

[Andriy-Kulak]

@langpavel Thanks for the insight. I will look into the things you mentioned.

Right now I deploy in heroku using the command "babel-node tools/run deploy" which was in the redux/feature branch

How can your question help in me understanding the deploy process better?

[langpavel]

Definitely look at the article about optimizing Express apps.
Deploy script you are using should build in production mode so this is OK.