"modern" mode

Inspired by Meteor 1.7 and the fact that you can easily ship ES2015 code and legacy code side-by-side, we can enable a mode where Vue CLI produces two bundles: one for legacy browsers using the specified browserslist values, and one that targets only browsers that support <script type="module">.

• babel-preset-env supports targets: { esmodules: true } which allows us to easily target these modern browsers.
• We can likely extract the corresponding browsers list for autoprefixer as well.

This should allow Vue CLI users to ship a significantly smaller, and decently more performant bundle to a large percentage of end users. In Vue 2.6 we can also add a build of Vue that ships native ES2015, which can be used in this mode.

[LinusBorg]

Oh, so you changed the browserslist and applied the --modern flag?

changing the browserslist to cover only modern browsers will make webpack build a bundle that contains only modern mode without the --modern flag.

And any additional “trickery” that “modern mode” does, i.e. changing the modern bundle’s <script> elements to type="module" are not necessary as that’s just a way to make the two bundles work side-by-side - which you don’t want or need.

[larsschellhas]

@ttodua it’s been a while since your question, but here is the extensive explanation: https://github.com/browserslist/browserslist#browserslistrc

TL;DR: each row is connected with an OR, therefore, "build for every browser version which has >1% market share OR the last 2 versions of a browser OR is not IE version <= 8.

I changed my file to be

> 1% and last 2 versions and not dead

This results in Vue CLI building only for modern browsers.