Nuxt.js: Exclusive Modern Mode Feature

[AndrewBogdanovTSS]

What problem does this feature solve?

As a dev who don't need to support old browsers I would like to have a way to build only the modern version of the build so I could spend less time on generating the final assets

What does the proposed changes look like?

I think in addition to --modern flag we can have smth. like --no-legacy that will disable standard build generation

_{This feature request is available on Nuxt community (#c8308)}

[leekichko]

We really really really would like to see this, build times are terrible.

[ustun]

This would make things much faster in dev. I think most people should build against latest browsers, and the compile to older browsers at CI. Developers are paying a terrible price during development to support production. Of course, some sort of testing should be done before going live.

[koresar]

Serving static website (after nuxt generate). I can see that both legacy and modern bundles are loaded by the browser. What's the point of "modern" build if a user browser have to load legacy too?

[AndrewBogdanovTSS]

@koresar, are you sure that they both are actually loaded, maybe they only referenced twice?

[koresar]

Here is how I tested it.

$ nuxt generate --modern
$ npx node-static dist/

Open http://localhost:8080
See the Network tab in the browser.

Red - legacy bundle.
Green - modern bundle.

I expect only 4 .js files to be downloaded by the browser (it's a fresh new nuxt project). However, as you can see there are 8.

[AndrewBogdanovTSS]

@koresar looks like a bug

[koresar]

Hello @Atinux

Sorry poking you. Please take a look at the screenshot above. Is it a bug?

TL;DR: the generated SPA-mode website downloads both legacy and modern bundles. Thus website gets twice larger.

[manniL]

@koresar Please file a new bug report ☺️ (at https://bug.nuxtjs.org/)

Please try it with nuxt-edge first (yarn remove nuxt && yarn add nuxt-edge) to see if the bug already has been fixed, eg via https://github.com/nuxt/nuxt.js/commit/ecf76d91f1bec8dcab8f2c7715e0e07a19d0b6fe

[AndrewBogdanovTSS]

@koresar did you run your code with explicit --modern flag? As far as I remember this was required until recently. Please, try to recreate it with Nuxt 2.4.2, I think it's already fixed

[koresar]

@AndrewBogdanovTSS looks fixed. Thank oyu.

[cypressious]

Any updates on this? Anthing that improves build times would be a welcome addition.

[manniL]

you could use modern only in prod for now @cypressious

[AndrewBogdanovTSS]

@manniL doing exactly that for now :)

[husayt]

Any ideas when was this fixed @koresar @manniL ? I see this still happening in 2.4.3 with generate:

The resource ....js. was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

I see borwser loading both sets of js files

[clarkdo]

@husayt Could you provide a repo ?

[clarkdo]

For anyone wants include modern bundles only, actually you don't need to use build.modern.

You can leverage @nuxt/babel-preset-app directly, increase babel transpiling level by：

// nuxt.config
// Note: remove `modern` in nuxt.config
  build: {
    babel: {
      presets: ({ isServer }) => {
        return [[
          '@nuxt/babel-preset-app',
          {
            targets: isServer ? { node: 'current' } : {},
            modern: !isServer 
          }
        ]]
      }
    }
  }

[AndrewBogdanovTSS]

thanks for a workaround @clarkdo but it would be great to see a cleaner built in option that can be applied in nuxt.config

[clarkdo]

@AndrewBogdanovTSS Working on it recently 😸

[AndrewBogdanovTSS]

@clarkdo I tried your snippet but it didn't change build behavior in any way, still got 2 client builds happening instead of just modern one

[clarkdo]

With this config, you don't need to specify modern, because default client build will generate modern bundles by babel.

[AndrewBogdanovTSS]

@clarkdo so the actual "green" line means modern build now?

[husayt]

@clarkdo Here is the demo:

https://codesandbox.io/s/r4v8mr729p

I just added this to nuxt-config:

  mode: "spa",
  modern: true,

You can see browser loads both sets of js files modern and classic. I also get a warning in chrome:

The resource https://r4v8mr729p.sse.codesandbox.io/_nuxt/app.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
....

[clarkdo]

Yes, it's just a way to make bundles have a higher transpilation level, then bundles will be built with only supporting modern browsers.

[clarkdo]

@husayt Please have a look at my comment above, please remove modern in nuxt.config.

Sorry, I misunderstood the comment context, will have a look asap

[husayt]

I tried various browsers. This happens in Chrome 69, Edge and IE11. Only Firefox 60 behaved as expected and did only load modern bundle.

[AndrewBogdanovTSS]

@clarkdo will it build all 3 bundles for production with such setup? I want only-modern only in dev mode

[clarkdo]

@AndrewBogdanovTSS We're discussing this, if the proposal gets agreed, I'll work on it asap

[clarkdo]

@husayt Your issue will be fixed in #5043

[AndrewBogdanovTSS]

@clarkdo any updates on this issue?