Make Dreact serve different JS bundles depend on what's the browser request them

[radion-chernyakov]

Why is it matters:

• allows you to ship only polyfills that browser really need
• makes modern browsers be able to use native syntax instead of transpired into old one (as class or ?. operator)

All these things reduce JS bundle size which improves client performance metrics

Todo:

• ? migrate to next.js first
• make different browserslist ENVs based on users statistic
• make separate JS bundles for each ENV
• serve different JS bundles based on useragent on same request path (doesn't work with CDN)
  OR
• serve different HTML with different paths to JS bundle based on useragent

App faster -> users happier -> client happier :)

[ezhlobo]

@nixololo I love this and thank you very much for converting this into a well-described issue.

I agree with your todo list, our choice between react-scripts and nextjs will influence on how we'll implement it.

[radion-chernyakov]

@ezhlobo

our choice between react-scripts and nextjs

As I already mentioned in slack seems like making this with next.js is a tricky thing to do. The most blocking thing is that they don't use browserslist:

• it makes impossible to re-use their babel preset as they have hardcoded target option https://github.com/cuining/babel-preset-next/blob/master/index.js#L6 (and there is no way to set it to undefined
• there is no way to customize babel-loader cache, so building NextJS app with different BROWSERSLIST_ENV does not affect JS bundle w/o babel-loader cache prune https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack/loaders/next-babel-loader.js#L70

I'll try this idea with react-scripts and will leave report here