Decrease the bundle size and the build time

How to use GitHub

Please use the 👍 reaction to show that you are interested into the same feature.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.

The current production build is:

47 MB of JavaScript which is VERY huge and much impact page load and UX
- About 200 MB built assets incl. source maps
~90-100 seconds of build time which impact CI time and DX

Describe the solution you'd like

Do not make unnecessary browser compatibility

Currently, we transpile ES13 (ES2022) -> ES5 (before ES2015)
ES6 and ES5 have a HUGE difference: shorthands, arrow functions, classes, promises, spread/rest operators
ES6 has more coverage than WebRTC and Custom CSS Properties what we widely use
Bundling to ES6 may save much time and MBs

Use modern bundling and transpiring tools

Babel is very flexible and supports ES5. But it is slow. ESBuild is a good alternative and maybe a dozen times faster
Vite is a great option, it is based on ESBuild and Rollup on production and has a new approach with nearly zero-time bundling on development (actually no bundling on development)

Consider dropping SASS preprocessor

Many things CSS preprocessors were used for are not relevant now. Modern CSS has modules, custom properties (aka CSS Variables), functions, calc, and even CSS Nesting. To support older browsers we can use PostCSS-Preset-Env. I believe, nowadays the main purpose of using SASS is making a very flexible reusable CSS, like CSS frameworks with grids and utils generations, plugins and etc.

Why use PostCSS processing instead of css preprocessor?

CSS is a web standard, we can follow standards
Some features are supported already by most browsers natively
Other features will be supported in future
It may follow nextcloud/browserslist-config

Missing feature

The only missing feature is nesting with adding suffixes like

.message {
  &__part {
    ...
  }
}

But on the other hand, this adding suffices it's harder to find a style rule by class because there is no message__part in the source.

nextcloud / spreed