New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload lang chunks #486

Closed

jeanphilippeds opened this issue Oct 14, 2019 · 20 comments · Fixed by #823

Labels

feature request

jeanphilippeds commented Oct 14, 2019

What problem does this feature solve?

Hello,

I'm working on a 30-lang website and it would be great to preload some lang chunks.

Ex:

On http://website.com/it/ ('it' and 'en' chunks are preloaded, as 'en' is the fallback language)
On http://website.com/fr/ ('fr' and 'en' chunks are preloaded)

Btw, is it possible to do so today?

Thanks,

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

ghost added the cmty:feature-request label

Collaborator

rchl commented Oct 14, 2019

This is how it works right now with lazyLoad enabled. Do you want to customize it more or don't know about existing behavior?

Author

jeanphilippeds commented Oct 14, 2019 •

edited

Loading

Indeed, it's linked to the lazyload feature. I can't disable it, otherwise it would bundle translations for 30 countries, having a huge impact on the bundle size.

Collaborator

rchl commented Oct 14, 2019

By preload you mean use the preload meta tag?

Author

jeanphilippeds commented Oct 14, 2019

Exactly!

Author

jeanphilippeds commented Oct 17, 2019 •

edited

Loading

I managed to do it, although I'm not really proud of the solution:

In the layout:

if (process.client){
    import('~/path/to/translations/messages.en_GB.yml')
    import(`~/path/to/translations/messages.${__NUXT__.state.layout.locale}.yml`)
}

Collaborator

rchl commented Oct 20, 2019

I thought I've understood what you were requesting but your last comment has confused me again.

Apparently you are not talking about preload tags (https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).

Lazy loading itself is loading all messages for the current locale and fallback locale so I'm not sure what are you missing exactly and how importing those yml files helps you.

Author

jeanphilippeds commented Oct 21, 2019

I'll try to be clear enough:

Conditions:

I'm using Nuxt-i18n
lazy feature is activated

What is the problem?

On client side, when JS is executed, lang files are loaded sequentially:
- First, the browser gets the fallback lang file (in my case: en_GB)
- Then, it fetches the current locale lang file (let's say fr_FR)
  It has an impact on my website performance as the user is waiting for the server to answer, twice.

What solutions?

Use a preload tag to get those 2 files sooner. But I did not manage to configure it properly.
Use webpack function import() to:
- Get the lang files when the JS execution starts.
- The browser caches it so it's already loaded when it's needed later.

Collaborator

rchl commented Oct 21, 2019

Now I understand, thanks :)
Since fallback is always required, it would make sense to have it in the main bundle already.
For the current language, I'd try to add preload tags.

No idea how to do those things yet but will investigate at some point. :)

rchl added the feature request label

stale bot commented Dec 20, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale bot added the wontfix label

stale bot closed this as completed

rchl reopened this

stale bot removed the wontfix label

This comment has been minimized.

Sign in to view

This comment has been minimized.

Sign in to view

This comment has been minimized.

Sign in to view

This comment has been minimized.

Sign in to view

stale bot commented Mar 20, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale bot added the wontfix label

stale bot commented Mar 20, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

rchl removed the wontfix label

stale bot commented May 19, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale bot added the stale label

rchl removed the stale label

tvld commented May 20, 2020

It's still a relevant issue. To avoid delay or screen flash for users that need the non-english, preload of the native might be preferable first... ))?

stale bot commented Jul 19, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale bot added the stale label

rchl removed the stale label

rchl removed the cmty:feature-request label

rchl mentioned this issue

Default locale should be loaded from main bundle #818

Closed

rchl added a commit that referenced this issue


          fix(lazy): make client use translations loaded on the server

8f2d2d5

Instead of client importing and processing messages (translations)
itself on load pass already loaded messages from the server through
nuxtState. This will in most cases allow avoiding triggering an extra
network request to fetch lang file for given locale.

Slight behavior change: The client will no longer import the lang file
itself for the initially used locale. That means that if the lang file
has exported a function, it will only be called on the server and not
the client. This matches behavior of "asyncData" and I think it makes
more sense in general.

Resolves #486
Resolves #663

rchl mentioned this issue

fix(lazy): make client use translations loaded on the server #823

Merged

Collaborator

rchl commented Aug 3, 2020 •

edited

Loading

With #823 we'll load translations on the server and pass that to the client so extra network requests (combined with #820) will be completely avoided.

That means that there is no need to add extra preload tags.

rchl closed this as completed in #823

rchl added a commit that referenced this issue


          fix(lazy): make client use translations loaded on the server (#823)

06bc5f1

Instead of client importing and processing messages (translations)
itself on load, pass already loaded messages from the server through
"nuxtState". This will in most cases allow avoiding triggering an extra
network request to fetch lang file for the given locale.

Slight behavior change: The client will no longer import the lang file
itself for the initially used locale. That means that if the lang file
has exported a function, it will only be called on the server and not on
the client. This matches behavior of "asyncData" and I think it makes
more sense in general.

Resolves #486
Resolves #663

Collaborator

rchl commented Aug 4, 2020

Released in v6.13.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment