The more translations (routes) the lower performance

[hoiheart]

Version

nuxt-i18n: ^6.10.1 (latest)
nuxt: ^2.0.0 (latest)

Reproduction Link

https://github.com/hoiheart/nuxt-issue-demo/tree/i18n-performance

Steps to reproduce

When the TPS is measured under the same conditions,

• with i18n
• increase page count
• increase message objects

What is Expected?

The request throughput must be similar before and after the module is used. (639 TPS)

What is actually happening?

When the TPS is measured under the same conditions,

• Less TPS with i18n (583 TPS)
• Less TPS depending on page count (568 TPS)
• More message objects significantly reduce TPS (258 TPS)

Since it's a test on a personal PC, the TPS figure doesn't mean much.
But the decline is significant.
If you have any problems with my setup, please give me some advice

[rchl]

How are you measuring TPS?
Are you hitting one and the same URL when testing?

[hoiheart]

How are you measuring TPS?
Are you hitting one and the same URL when testing?

I used apache jmeter and thread kept calling root and measuring throughput.

[hoiheart]

@rchl
Is there any progress on this issue?

[rchl]

I haven't had time to try it out yet but planning to do that at some point.

[rchl]

It looks like it's mostly the extra routes that nuxt-i18n generates that contribute to the performance issue.

So it really looks like a pure Nuxt (or VueRouter) issue. I don't know if I'll have time to look into it more soon. Maybe someone from core team will (@pi0, @Atinux, @manniL). This issue could be even moved to Nuxt repo.

nuxt-i18n with default settings from the repo (focus on /s Avg):

summary +  11573 in 00:00:30 =  385.6/s Avg:    12 Min:     5 Max:    35 Err:     0 (0.00%) Active: 5 Started: 5 Finished: 0
summary =  13503 in 00:00:42 =  323.5/s Avg:    12 Min:     3 Max:   124 Err:     0 (0.00%)
summary +   9267 in 00:00:23 =  397.4/s Avg:    12 Min:     5 Max:    34 Err:     0 (0.00%) Active: 0 Started: 5 Finished: 5
summary =  22770 in 00:01:05 =  350.0/s Avg:    12 Min:     3 Max:   124 Err:     0 (0.00%)

strategy no_prefix (no extra routes):

summary +  25723 in 00:00:30 =  857.4/s Avg:     5 Min:     2 Max:    23 Err:     0 (0.00%) Active: 5 Started: 5 Finished: 0
summary =  30046 in 00:00:42 =  707.2/s Avg:     5 Min:     2 Max:   106 Err:     0 (0.00%)
summary +  19877 in 00:00:23 =  881.4/s Avg:     5 Min:     2 Max:    25 Err:     0 (0.00%) Active: 0 Started: 5 Finished: 5
summary =  49923 in 00:01:05 =  767.6/s Avg:     5 Min:     2 Max:   106 Err:     0 (0.00%)

nuxt_i18n disabled:

summary +  24266 in 00:00:28 =  872.3/s Avg:     5 Min:     2 Max:    20 Err:     0 (0.00%) Active: 5 Started: 5 Finished: 0
summary =  24267 in 00:00:33 =  735.1/s Avg:     5 Min:     2 Max:    76 Err:     0 (0.00%)
summary +  28895 in 00:00:30 =  963.2/s Avg:     5 Min:     2 Max:    21 Err:     0 (0.00%) Active: 5 Started: 5 Finished: 0
summary =  53162 in 00:01:03 =  843.7/s Avg:     5 Min:     2 Max:    76 Err:     0 (0.00%)
summary +   1954 in 00:00:02 =  960.7/s Avg:     5 Min:     2 Max:    17 Err:     0 (0.00%) Active: 0 Started: 5 Finished: 5
summary =  55116 in 00:01:05 =  847.4/s Avg:     5 Min:     2 Max:    76 Err:     0 (0.00%)

nuxt_i18n disabled + only a single index.vue route:

summary +  30191 in 00:00:30 = 1006.4/s Avg:     4 Min:     2 Max:    19 Err:     0 (0.00%) Active: 5 Started: 5 Finished: 0
summary =  33113 in 00:00:40 =  824.1/s Avg:     4 Min:     2 Max:    86 Err:     0 (0.00%)
summary +  27174 in 00:00:25 = 1092.9/s Avg:     4 Min:     1 Max:    16 Err:     0 (0.00%) Active: 0 Started: 5 Finished: 5
summary =  60287 in 00:01:05 =  926.9/s Avg:     4 Min:     1 Max:    86 Err:     0 (0.00%)

(Note: that for testing I've disabled message loading (lazy: false) to focus on bigger fish)
(Note 2: nuxt-i18n also contributes to the issue of course as it has to run some code but the biggest offender seems to be just the number of routes.)

[hoiheart]

@rchl
Thank you. I hope this issue is resolved soon. 🙏

[rchl]

It's most likely this code creating various maps and lists of routes and especially heavy use of regexpes in it:

https://github.com/vuejs/vue-router/blob/7d7e048490e46f4d433ec6cf897468409d158c9b/src/create-route-map.js#L7-L12

Such things might be hard to optimize as those are things that can't just be skipped. But I don't know that code so maybe there is something that can be done.

FYI @posva

[rchl]

See how VueRouter takes big chunk of normal page loading time when there are many routes:

[Croodo]

Will Removing translation messages (locales files) from the lang directory and fetching them through Axios gonna make any difference?
Anyone have a thought about it?

[rchl]

The issue identified here is related to the number of routes and not locale files or messages. Fetching them with axios is only gonna make things slower.

[Croodo]

@rchl, please invite someone from the core team to investigate the issue. I guess this issue needs to be solved asap.

[Croodo]

Any update regarding this issue?

Upgraded from nuxt-i18n to nuxtjs/i18n but still no improvement.

[divine]

Any update regarding this issue?

Upgraded from nuxt-i18n to nuxtjs/i18n but still no improvement.

Hello,

Quite interesting that you are blaming this module, it has been already explained that this is upstream issue that can't be fixed here.

Also, if this is needs to be solved ASAP, you could just push a PR with the fix. Would be really helpful, right?

Thanks!

[Croodo]

Any update regarding this issue?
Upgraded from nuxt-i18n to nuxtjs/i18n but still no improvement.

Hello,

Quite interesting that you are blaming this module, it has been already explained that this is upstream issue that can't be fixed here.

Also, if this is needs to be solved ASAP, you could just push a PR with the fix. Would be really helpful, right?

Thanks!

First of all, no way I'm blaming the module.
I did the recent comment is just to get the issue noticed by people so that by discussing we can investigate the issue more deeply to find a solution.
I'm extremely sorry, but you get me wrong, I was not blaming.

[rchl]

It's an upstream issue so it would more relevant to track nuxt/nuxt#7473 for example.
Maybe there should also be an issue in VueRouter for this, assuming that it concerns itself with SSR also.

[coremyslo]

About a year ago, I encountered the same issue.

My solution involved forking and rewriting the module so that it doesn't create a separate route for each locale. Instead, it allows setting up vars in the route for a single locale. Here's an example of the route configuration:

{
    name: `my-route-name`,
    path: `/{foo}-fixed-path-part-{bar}`,
    ...,
    meta: {
        i18n: {
            foo: {
                da: "aaa",
                de: "bbb",
                en: "ccc",
            },
            bar: {
                da: "111",
                de: "222",
                en: "333",
            },
        },
    },
},

for da route path will be parsed as aaa-fixed-path-part-111
for en route path will be parsed as ccc-fixed-path-part-333
etc.

In case of missing value in meta[param][locale] fallback to meta[param][defaultLocale]

I believe this module could be updated to support this route setup method through parameters or by manually parsing the routes as another option.

[BobbieGoede]

Performance still gets noticeably worse due to the amount of routes generated in v8 (Nuxt 3), we're tracking this in nuxt/nuxt#25612 and vuejs/router#2132.