🐶 📦

RETRIEVER

Nazim

Cormac

Thibaut

BACKGROUND

✨ Browsers get new JS and CSS APIs

 

👵 Code should work in the oldest one

 

👎 Chrome 59 be like 🙄

OBJECTIVES

Is it possible ?

➡️  How can we deliver each browser its own JS and CSS ?

 

What does this change ?

➡️  File size ? Execution time ? Mobile friendly ?

 

Can it help the community go forward ?

➡️  Better tooling ? Browsers improvements ?

RETRIEVER — BUNDLER

Configuration

targets: [
    {
        chrome: 43,
        explorer: 11,

        edge: 12,
        firefox: 38,
        safari: 8
    }, {
        chrome: 57,
        firefox: 52,
        safari: '10.1'
    }
],

chrome: {
  '43': {
    'dash-list': {
      js: ['dash-list.47ac51.js']
    }
  },
  '57': {
    'dash-list': {
      js: ['dash-list.201b99.js']
    }
  }
},
firefox: {
  '38': {
    'dash-list': {
       js: ['dash-list.47ac51.js']
    }
  },
[...]

 

➡️

JSON Result

RETRIEVER — SERVER

Node.js microservice

· POST /config

 

· GET /bundle?user-agent=...&entry-points=dash-list,monitors

{

    'dash-list': ['dash-list.123456.min.js'],

    'monitors': ['bundle1.<hash>.min.js', 'bundle2.<hash>.min.js']

};

➡️

LESSONS

It's working ! But it's naive

➡️  Better ways to do it: redirections​

 

Performance gain is small

➡️  6% smaller bundle, 6.5% shorter execution time

 

It adds quite some complexity

➡️  More bundles to test, build step more complex / long

 

Not open-source ready

➡️  Infrastructure dependant