"modern" mode

[yyx990803]

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.

[Akryum]

That would be awesome! 😻

[yyx990803]

Closed via 204d8f0 and 0b42f2f

Now this can be done simply with vue-cli-service build --modern.

[myst729]

This will definitely push the boundary!

Last year we did the experiment in one of our project with average UV of ten thousands. It's been great, along with lots of pitfalls though. By the time AFAIK, no other companies in China had ever thought of doing so. Later we pushed the solution to our most important project. And it went well since then. Currently we are planning a bigger move. Possibilities are out there.

[yyx990803]

@myst729 please test and review the feature for any particular pitfalls you have run into!

[tcamde]

This is great and solves me a lot of headaches!
I noticed one downside is though that legacy browser will load the legacy files AND the modern files. Shouldn't they just load the legacy files?

[williangd]

@yyx990803 Is it possible to build only on es2015/modern mode? Without build 2x times.. one for legacy and another for modern?

with angular-cli@8, it is possible changing browserslist file.

I changed browserlistrc to list only moderns browsers, but don't work.

.browserslistrc:

> 4%
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions

[LinusBorg]

but don't work.

Insofar as...?

[williangd]

but don't work.

Insofar as...?

continued to generate two separate builds, modern and legacy.

[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.

[alexcroox]

I'd still like to be able to trigger them separately without having to adjust browserslist. The main reason is my CI/CD deployment container sometimes runs out of allowed memory for my plan, trying to do both at once. If I could split them out into 2 separate actions I could avoid this.

[ttodua]

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

Can you please give example of corect syntax to be put in browserslist, for whoever are not familiar with the meaning of i.e.:

> 1%
last 2 versions
not ie <= 8

[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.