Nuxt.js: Since Nuxt 2.9.0, Nuxt is really slow. (Works perfect on 2.8.1)

Created on 3 Oct 2019  路  25Comments  路  Source: nuxt/nuxt.js

Version

v2.9.0

Reproduction link

https://github.com/t1gu1/nuxt-2.9.0-and-more-is-slower

Steps to reproduce

  • Install the project and read readme.
  • Switch between Menu 1 and Menu 2 few time.

We can really see the issue when we change from a page to another (Click on a menu link few time)

What is expected ?

Be as fast as 2.8.1

What is actually happening?

Since the 2.9.0 the performance drop is huge. (3s+ to load a page)
As is said, we can really see the issue when we change from a page to another (Click on a menu link few time)

Additional comments?

On the 2.8.1, it seems take less than an half second. (Maybe less it's really fast)
I just test the 2.10.0 and the issue is still present. (We build and start a new project to test)

This bug report is available on Nuxt community (#c9857)
bug-report

Most helpful comment

@t1gu1 to workaround your issue you need to use nuxt-i18n better. disable seo in nuxt config and see this -> https://github.com/nuxt-community/nuxt-i18n/blob/master/docs/seo.md#improving-performance

All 25 comments

See #6279, with potential workaround.

Hi @danielroe,

I don't really see any workaround in the issue #6279 and the status is defined close without solution.
The only workaround i've found myself is to downgrade to the 2.8.1. :(

As is said, we can really see the issue when we change from a page to another (Click on a menu link few time)

Can it be really link to the issue #6279 ?

Thanks for the answer.

@t1gu1 Worth a try - https://github.com/nuxt/nuxt.js/issues/6279#issuecomment-528763416: export const strict = false in store/index.js

Except the index.js with pretty nothing inside that I don't use, I don't really have a store in the reproductible project that I share.

@danielroe, I just remove all store that was present in the test project (store/index.js) and the speed of the application is effectively more constant and faster. It takes now 1.8s to load a page and not 3s. The speed seems decrease with time. (Less than before)

BUT with the version 2.8.1 it takes like 200ms(I dont really know) to load a page. It's really faster in 2.8.1.

The workaround is effective but really not as downgrade the version to 2.8.1.

I hope all these info will/could help. :)
Thanks!

@t1gu1 does it happen only in dev mode or in production build too?

@t1gu1 Thank you so much for the report, I鈥檒l look into it this weekend

Hi @t1gu1 , there is some founding from @aldarund , could you try to turn off vue-meta by setting features.meta: false in nuxt.config?

@t1gu1 to workaround your issue you need to use nuxt-i18n better. disable seo in nuxt config and see this -> https://github.com/nuxt-community/nuxt-i18n/blob/master/docs/seo.md#improving-performance

@aldarund, from my experience about that problem, this is just a tiny mini bit better in prod mode.
I'll repeat myself but it still really not comparable to the 2.8.1.

Also thanks @clarkdo & @aldarund for the vue-meta / seo reference.
I'll test it and make a feedback to you in my next comment.

I'll just let you keep in mind than that happend only after 2.8.1 and it was fine before. (Testable in the linked project if you switch between version in the package.json)

So basically I think that your points are nice performance optimisation that i'll try to keep in mind for my future & current project (Thanks for that) but it's not the problem.

What's change in the 2.9.0 that could make all that slower and now require a lot performance optimisation from Nuxt users? What could you guess?

Thanks for all again!! :)

@t1gu1 Here is the changelog: https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0

Note the vue-meta upgrade, for example.

@t1gu1 which version of vue-meta are you using? Do you also use nuxt-jsonld or nuxt-i18n ? If yes try to force install [email protected] and let me know how it affected the performance.
Check out https://github.com/nuxt/vue-meta/issues/443 to get more context of an issue

Best workaround from @aldarund
:heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:
@aldarund This is it!!! :heart: #bigThanks
Your link about that: https://github.com/nuxt-community/nuxt-i18n/blob/master/docs/seo.md#improving-performance
:heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:

Since I turn seo off and add it as it's described(The optimized way), the speed is as good as 2.8.1. (And I keep the vuex store without the changes we talks)

_p.s. Desactivate store make a little difference but it was really nothing compare to turn seo off and use the workaround._


@AndrewBogdanovTSS, I use nuxt-i18n.
vue-meta is a default nuxt package so i'm not sure how to make the force install of it.
If it's not a default package installed in Nuxt, I do not have that package in the test project that we talk. If it is. feel free to use my reproduction link to test your point. (Sry, I just dont really know how to force a package of a package)


To resume, the performance drop since the 2.9.0 is clearly about meta/nuxt-i18n meta/seo.
@AndrewBogdanovTSS, it really looks something like the issue you share (nuxt/vue-meta#443), because I really feel it when the routing is trigger and page change.

Thanks again @everyone!

Please note that [email protected] has been released, no need to install the beta anymore. You can run yarn upgrade or yarn add [email protected] to install the newer version

@t1gu1 Last friday I spent quite some test trying to get to the bottom of this but had to give up due to other obligations. Although you were saying that _it was fine before_, it really wasnt. In any version of vue-meta there appears to be a memory leak if a global mixin adds a head function, which makes me believe the issue might originate from Vue.
The only 'issue' that seems to exists is that since vue-meta v2 that memory leak is causing issues, might just be because something wasnt working before but since v2 it is.

The only 'issue' that seems to exists is that since vue-meta v2 that memory leak is causing issues, might just be because something wasnt working before but since v2 it is.

That's really make me laugh haha :rofl:


@pimlie, I've two small question for you. (or everyone)

  1. Is vue-meta a defaut Package installed with/inside Nuxt?
  2. (If it's a default nuxt package) If I install the package, will it "ovewrite" the one used by Nuxt?

I just wanna to be sure, because I don't have that package in my package.json.

Thanks

  1. vue-meta is a dependency of nuxt indeed.
  2. With yarn upgrade no. With yarn add [email protected] also no until nuxt upgrades to v3 but your package.json is still pointing to v2. But Nuxt will log a warning about version mismatching anyway, so yes but no.

See here for more info how package versions are matched

@danielroe (Just to share) I'm not sure about the point of strict on that issue. https://github.com/nuxt/nuxt.js/issues/6279#issuecomment-528763416

In the official documentation, they say:

Do not enable strict mode when deploying for production!

Reference: https://vuex.vuejs.org/guide/strict.html

@t1gu1 if you are using yarn you can add:

"resolutions": {
    "vue-meta": "2.3.0"
  }

inside your package.json - that will make yarn choose specified version over the one that is required by the related package

@t1gu1 it's not enabled in prod :wink:

Also, please refrain from posting the same comment in two distinct issues please. That won't help anyone.

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

This looks like a bug to me, is there a way we can have those stuff disabled by default ?

A fresh install takes 3 seconds to HMR the index page btw.

Steps to reproduce:
1.- Deploy a nuxt website with ssr enabled that used the head function.
2.- Rate it on page speed insights.

My score went from 95 to 50 after adding the head function.

@RenFontes have you tried adding debounceWait to vueMeta config? Something like:

nuxt.config.js

vueMeta: {
   debounceWait: 250
}

@RenFontes have you tried adding debounceWait to vueMeta config? Something like:

nuxt.config.js

vueMeta: {
   debounceWait: 250
}

It's interesting my page speed insights score is still awful, but at least it loads faster. Thanks. :)

In any case, I'll try hosting it somewhere else and see if that helps. If it doesn't, I'll just do a node backend that loads the meta tags in the html instead of using nuxt.

@RenFontes can you prepare a repro at codesandbox? So the issue could be pushed forward

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pehbehbeh picture pehbehbeh  路  3Comments

mikekidder picture mikekidder  路  3Comments

mattdharmon picture mattdharmon  路  3Comments

VincentLoy picture VincentLoy  路  3Comments

vadimsg picture vadimsg  路  3Comments