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-envsupportstargets: { 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.
yyx990803
All 11 comments
That would be awesome! 馃樆
Akryum
on 5 Jun 2018
Closed via 204d8f07 and 0b42f2f7
Now this can be done simply with vue-cli-service build --modern.
yyx990803
on 13 Jun 2018
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.
myst729
on 15 Jun 2018
@myst729 please test and review the feature for any particular pitfalls you have run into!
yyx990803
on 15 Jun 2018
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?
tcamde
on 29 Jun 2018
@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
williangd
on 12 Jun 2019
but don't work.
Insofar as...?
LinusBorg
on 12 Jun 2019
but don't work.
Insofar as...?
continued to generate two separate builds, modern and legacy.
williangd
on 12 Jun 2019
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.
LinusBorg
on 12 Jun 2019
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.
alexcroox
on 2 Apr 2020
changing the browserslist to cover only modern browsers will make webpack build a bundle that contains only modern mode without the
--modernflag.
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
ttodua
on 24 Oct 2020
Related issues
DrSensor
路
3Comments
OmgImAlexis
路
3Comments
CodeApePro
路
3Comments
sanderswang
路
3Comments
joshuajohnson814
路
3Comments
Most helpful comment
Oh, so you changed the browserslist and applied the
--modernflag?changing the browserslist to cover only modern browsers will make webpack build a bundle that contains only modern mode without the
--modernflag.And any additional "trickery" that "modern mode" does, i.e. changing the modern bundle's
<script>elements totype="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.