DEV Community

Cover image for Modern Build in Nuxt.js

Modern Build in Nuxt.js

Debbie O'Brien on April 14, 2020

The modern property in Nuxt.js allows you to serve both modern bundles to modern browsers and legacy bundles to those legacy browsers that still ex...
Collapse
 
coldestheart profile image
Ilia (COLD) • Edited

I still can't understand why we need:
"build: modern": "nuxt build --modern = server",

Cause i thought nuxt perfectly works with fetch and others features (Thanks to polyfills)

Yes, we can disable support for older browsers, but for what? What exactly will be an advantage for us using this method

Collapse
 
fernandosavio profile image
Fernando Sávio

At the bottom of the documentation of the modern property there is a link to an article which explains it better. Basically, if you cut out polyfills your bundle size and parse/eval time can be cut down by half (*based on the numbers of the article).

But is important to note that this approach doesn't disable support for older browser, it just avoid loading polyfills on modern browser which doesn't need them.

Collapse
 
spunkie profile image
Spunkie

I'm failing to come up with any kind of scenario where I wouldn't want this enabled 100% of the time? This there a reason this isn't turned on by default in nuxt?

Collapse
 
debs_obrien profile image
Debbie O'Brien

it will be in the future I believe

Collapse
 
simplenotezy profile image
Mattias Fjellvang

Interesting! Any way to run the analyzer with the "modern" option set? I'm curious what the difference will be.

Also, I am running a static generated site; would it be safe to simply set the "-m" flag on my deployment server, or do I need to test/make some changes before that?

Collapse
 
debs_obrien profile image
Debbie O'Brien

you can just set it on the deployment server. no need to do anything else. you can try running both commands in dev and see. never tried it to be honest. Here is some more info on how modern mode works
cli.vuejs.org/guide/browser-compat...

Collapse
 
rizkysyazuli profile image
Rizky Syazuli

Do you know how to disable polyfills completely? In my not-so-comprehensive tests, google pagespeed insight seems to be running as a legacy browser. and this caused all the polyfills to be loaded. which also makes my pagespeed score significantly lower.

Collapse
 
debs_obrien profile image
Debbie O'Brien

oh wow, interesting. no idea to be honest