react-universal | React redux react-router graphql postgres koa | Frontend Framework library

I have simple running react Server Side App .

GitHub Link for the repo, in the local env i have a build script that runs using npm start which starts the client and server builds and then i have a watcher which listen's to changes in file. This set up works really well locally.

I have following code on server side:

I get this warning:

I am trying to fix NextJS app for to work in IE11. I use webpack and babel. In Chrome and other modern browsers app is working fine, but on IE11 a get an error point to js arrow function. I am using next.config.js file and .babelrc. I have similar project working on IE11,it uses nextjs version 8.0.3, and this that dont work 9.2.0.

Here is my package.json file

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

What is the advantage of using Match and Miss components from react-router over Router component? I cannot seem find any documentation about this in react-router docs.

My question spawns from looking at react-universally boilerplate, more exactly, by looking here: https://github.com/ctrlplusb/react-universally

Warning:

I have three different Webpack configurations (client.webpack.js, server.webpack.js, and vendor.webpack.js) vendor.webpack.js is for creating a vendor bundle, as they change rarely and take up a lot of space. We use DllPlugin to generate it, and use the generated manifest.json in the client.webpack.js via the DllReferencePlugin.

The improvement I'd like to make is to add a hash to the vendor file, e.g. instead of vendor.js I want to create vendor.348723.js. The reason for that is to improve caching.

The tricky part is that our application is isomorphic, meaning that generation of HTML is done by the server (Node.js + React, server.webpack.js) in runtime. Inside the server, in a JS file, we create the template and there's somewhere. My question is, how do I inject the vendor.SOMEHASH.js there?

What I've tried and failed:

ExtendedAPIPlugin

Caching with Webpack, [hash] value inside index source code, using React.js

Using the ExtendedAPIPlugin inside the vendor.webpack.js, and trying to use __webpack_hash__ when generating the HTML template, e.g. Since I have two different Webpack configurations, and that I generate the hash inside vendor.webpack.js, it is not recognized by the server when generating the HTML template.

Other relevant info

We don't use html-webpack-plugin -- I don't think it applies as we have an isomorphic app. ( Webpack - Best way to update HTML to include latest [hashed] bundles )

Other relevant pages I looked

Link css filename with hash to index.html after the Extract Text Plugin

vendor.webpack.js

I am using webpack to create my production bundle for running an express application. I thought the webpack externals field would bundle up the dependencies I required to deploy without having to do a yarn install or an npm install.

My server webpack config looks like this: