DEV Community

Discussion on: Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more...

Collapse
 
atinux profile image
Sébastien Chopin

The modern bundles is for "modern" browsers (or called evergreen). This mode removes the polyfills for older browser to make it smaller (around ~30%).

Nuxt detects that by using our own list: github.com/rlindskog/nuxt.js/blob/...

You can learn more about it in this PR: github.com/nuxt/nuxt.js/pull/4419

Collapse
 
dotnetcarpenter profile image
Jon Ege Ronnenberg

So this is only for nuxt users who doesn't use babel-preset-env to transpile JavaScript.

Since babel-preset-env depends on browserslist and browserslist depends on caniuse-lite, which is the "fat" dependency you removed from nuxt.

Does the removal matter at all since this is unused data on the server-side, which should not even be installed when using npm install --production?

On the client-side the build should have the same size if I write the same evergreen browsers in my package.json, .babelrc or .browserslistrc.

I still can not tell from github.com/nuxt/nuxt.js/pull/4419/... , if the new list overwrite my browserslist query or detect if my query fits with modern browsers.
Sorry, if this obvious.

Thread Thread
 
atinux profile image
Sébastien Chopin

Actually if you use babel-preset-env to target specific browser right from Babel, you won't need to use the modern mode.

This modern mode is to both support old browser by giving them a bundle with polyfill while giving the smaller bundle when a modern browser hits the Nuxt server :)

You can learn more about it here anyway: nuxtjs.org/api/configuration-modern