"differential bundling"

index.mjs

import log from 'llog'
import path from 'path'
import fastifyStatic from 'fastify-static'
import fastifyCompress from 'fastify-compress'
import { service } from './service'
import sdkData from './sdkData'
import UA from 'browserslist-useragent'

const { src, legacySrc } = sdkData

service.register(fastifyCompress)

service.register(fastifyStatic, {
  root: path.resolve(process.cwd(), 'dist', 'sdks'),
  prefix: '/dist/sdks/'
})

export const isModernBrowser = (userAgent) => {
  return UA.matchesUA(userAgent, {
    _allowHigherVersions: true,
    browsers: [
      "Chrome >= 66",
      "Safari >= 11.1",
      "iOS >= 11.3",
      "Firefox >= 60",
      "Edge >= 17"
    ]
  })
}

export const redirectToClientJS = (request, reply) => {
  const userAgent = request.headers['user-agent']
  let srcForUserAgent = legacySrc

  console.log({isModern: isModernBrowser(userAgent)})

  if (isModernBrowser(userAgent)) {
    log.info('is modern browser')
    srcForUserAgent = src
  }


  log.info({msg: `request for JS lib received. Redirecting to ${srcForUserAgent}`, srcForUserAgent })
  reply.redirect(`${srcForUserAgent}`)
}

service.get('/sdk.js', redirectToClientJS)

export const onListen = (err) => {
  if (err) {
    log.error(err)
    throw err
  }
  log.info(`service listening on ${service.server.address().port}`)
}

// Run the service!
service.listen(8000, '0.0.0.0', onListen)

package.json

{
  //...
  "scripts": {
    "prepare-legacy": "cp -f legacy.babelrc .babelrc",
    "prepare-modern": "cp -f modern.babelrc .babelrc",
    "build": "rimraf dist && npm run prepare-modern && npm run build-client && npm run prepare-legacy && npm run build-client-legacy && npm run prepare-modern",
    "build-client": "cross-env BABEL_ENV=client parcel build src/sdk/index.html -d dist/sdks/sdk --public-url /dist/sdks/sdk",
    "build-client-legacy": "cross-env BABEL_ENV=client parcel build src/sdk/index.html -d dist/sdks/legacy-sdk --public-url /dist/sdks/legacy-sdk",
  }
}