perf: use browserslist targets

[VIKTORVAV99]

Issue

ESBuild is not picking up these automatically creating less than optimal generated code.

Description

Adds a package that converts our browserslist target to a ESBuild target instead, this shaves some code of the bundles but more importantly uses more efficient syntax and newer features like optional chaining to reduce property access and similar.

This reduces the total app size from 4307.86 KiB to 4294.74 KiB.

Also converts the config file to a module config instead of a cts config so the new package works as expected. This is needed for Vite 5 later on anyhow.

Note

If we are unsure about the compatibility I can always adjust the browsers list targets as well. For example explicitly include iOS/Safari 15.

Double check

• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[VIKTORVAV99]

This is either ESLint or Prettiers doing but it should be fine.

[madsnedergaard]

I'm a bit on edge about this, seems like a very low gain compared to potentially reducing usability in older browsers 🤔

[VIKTORVAV99]

I'm a bit on edge about this, seems like a very low gain compared to potentially reducing usability in older browsers 🤔

We are already targeting the CSS of the browsers list config via autoprefixer and postcss. And the current target we have is quite broad so I'm not that worried about it.

[tonypls]

I'm a bit on edge about this, seems like a very low gain compared to potentially reducing usability in older browsers 🤔

We are already targeting the CSS of the browsers list config via autoprefixer and postcss. And the current target we have is quite broad so I'm not that worried about it.

Could we test this branch preview vs prod on old browsers somehow? browser stack or similar?

[VIKTORVAV99]

I'm a bit on edge about this, seems like a very low gain compared to potentially reducing usability in older browsers 🤔

We are already targeting the CSS of the browsers list config via autoprefixer and postcss. And the current target we have is quite broad so I'm not that worried about it.

Could we test this branch preview vs prod on old browsers somehow? browser stack or similar?

I can look into it 👍🏻

[VIKTORVAV99]

Gave it a quick test on Safari 15.6 using browserstack (latest supported version of safari 15) and it seems to work without issues. But to be sure this doesn't change silently in the future we can add safari 15 to the browsers list target.

I see little point in testing chromium and Firefox as these are self updating, we could test on Firefox ESR if you wish but I'm not sure we need to support that. People that run ESR (which is a choice in this case) are not many and probably not our target audience.

EDIT: Firefox ESR are included in the defaults.

[VIKTORVAV99]

I propose we use this browsers list config:

  "browserslist": [
    "defaults",
    "safari 15.6",
    "ios_saf 15.6",
    "> 0.25%",
    "not ie 11",
    "not op_mini all"
  ],

vs what we use now:

  "browserslist": [
    "defaults",
    "not ie 11",
    "not op_mini all"
  ],

[tonypls]

Looks good to me!

To be safe I think we could document a revert plan then monitor sentry on deployment, if we see a significantly higher than expected error rate we could roll it back.

[VIKTORVAV99]

Looks good to me!

To be safe I think we could document a revert plan then monitor sentry on deployment, if we see a significantly higher than expected error rate we could roll it back.

Should I change the browsers list target to explicitly include Safari 15.6?