[RFC] Compile Modern.js new projects to ES6 by default

[chenjiahan]

Note: this RFC was implemented in #3695, and I am posting this RFC to give it more context.

1. Summary

Add a default browserslist configuration to new Modern.js projects to compile code to ES6, reducing output size and improving runtime performance. In addition, developers can customize the default browserslist configuration for compatible browsers, such as IE 11, as needed.

2. Motivation

Most web frameworks in the community have already adjusted their output format to compile code for ES6 or higher browser versions in 2021-2022.

And IE 11 has been pronounced dead in 2022: https://death-to-ie11.com/

As a modern web framework, it is necessary for Modern.js to adjust the default output format to improve the performance of most business pages.

The Modern.js npm packages and dependencies have already included ES6 code, such as react-router and @modern-js/utils. However, few users have reported compatibility issues, suggesting that most users do not care about the presence of ES6 code in the output.

3. Detailed design

To compile new projects to ES6 without affecting existing projects, we simply need to include a browserslist configuration in the newly created projects:

// .browserslistrc
chrome >= 51
edge >= 15
firefox >= 54
safari >= 10
ios_saf >= 10

The above configuration will compile to ES6 and reduce the size of new Modern.js projects by about 10% (from 430kb to 390kb).

If users need to support IE11, this is also straightforward. They can change the browser scope directly in the configuration file above. We have provided detailed instructions on how to use browserslist in the Modern.js Builder documentation.

4. Drawbacks

• Some new projects that require IE 11 compatibility will need to manually adjust the browserslist scope.