search

lephyrus / ngx-translate-messageformat-compiler

Advanced pluralization (and more) for ngx-translate, using standard ICU syntax which is compiled with the help of messageformat.js.
MIT License
93 stars 30 forks source link

Cordova + Angular + ngx-translate + ngx-translate-messageformat-compiler — performance issues on first compile cycle #42

Closed artuska closed 6 years ago

artuska commented 6 years ago

I have a 65 KB translation en.json file.

When the app starts and en.json file is loaded ngx-translate-messageformat-compiler starts to compile all en.json strings and it takes enormously loooong, ~15…20 seconds.

Everything is fast on desktop browser, but on mobile device compiling is very slow — my mobile app is just freezing till compile is finished.

Even if i manually edit en.json file by removing almost all translations (leaving only ~8 KB of translations i need on Auth screen of my app) it also takes very long to compile those translations, ~5 seconds. So, lazy loading just does not help at all.

So... any thoughts why this happen?

iPhone 5s iOS — 12.1 Angular — 5.2.3 Translate — 9.1.1 Compiler — 4.4.0

artuska commented 6 years ago

On localhost i added a debug compiler:

@NgModule({
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useClass: TranslationLoader,
                deps: [HttpClient]
            },
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatDebugCompiler,
            }
        })
    ],
    providers: [
        TranslationGuard,
        TranslationLoader,
        {
            provide: MESSAGE_FORMAT_CONFIG,
            useValue: {
                locales: ['ru', 'en']
            }
        }
    ]
})

In console i see this:

console.js:35 [TranslateMessageFormatCompiler] COMPILE (ru) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать аккаунт через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить пароль: undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Экономь на аренде квартиры — найди соседа по душе undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Найди квартиру для совместного проживания undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Листай вправо, если тебе понравилось или листай влево, если нет undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Посмотри, какие квартиры нравятся твоим возможным соседям undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Переписывайся с соседями и владельцами квартир онлайн undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить undefined
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE e-mail undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE пароль undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE e-mail undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE пароль undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE e-mail undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE пароль undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать аккаунт через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить пароль: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Экономь на аренде квартиры — найди соседа по душе undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Экономь на аренде квартиры — найди соседа по душе undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Найди квартиру для совместного проживания undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Найди квартиру для совместного проживания undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Листай вправо, если тебе понравилось или листай влево, если нет undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Посмотри, какие квартиры нравятся твоим возможным соседям undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Переписывайся с соседями и владельцами квартир онлайн undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать аккаунт через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить пароль: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Экономь на аренде квартиры — найди соседа по душе undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Экономь на аренде квартиры — найди соседа по душе undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Найди квартиру для совместного проживания undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Найди квартиру для совместного проживания undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Листай вправо, если тебе понравилось или листай влево, если нет undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Посмотри, какие квартиры нравятся твоим возможным соседям undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Переписывайся с соседями и владельцами квартир онлайн undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через соцсеть: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Войти через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Создать аккаунт через e-mail: undefined
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {auth: {…}, auth_slider: {…}, restore_form: {…}, signin_form: {…}, signup_form: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] INTERPOLATE Изменить пароль: undefined

So, first it compiles RU locale — COMPILE (ru)

Then i see hundreds of COMPILE (undefined) — what is this? Why it is compiling all the time instead of once?

artuska commented 6 years ago

If i completely remove MESSAGE_FORMAT_CONFIG from my NgModule:

@NgModule({
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useClass: TranslationLoader,
                deps: [HttpClient]
            },
            compiler: {
                provide: TranslateCompiler,
                useClass: TranslateMessageFormatDebugCompiler,
            }
        })
    ],
    providers: [
        TranslationGuard,
        TranslationLoader,
    ]
})

i see this:

[TranslateMessageFormatCompiler] COMPILE (ru) {abuse: {…}, adverts: {…}, adverts_edit_popup: {…}, adverts_navigation: {…}, adverts_offer: {…}, …}

a lot of INTERPOLATE messages

and then a lot of COMPILE messages:

console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {abuse: {…}, adverts: {…}, adverts_edit_popup: {…}, adverts_navigation: {…}, adverts_offer: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {abuse: {…}, adverts: {…}, adverts_edit_popup: {…}, adverts_navigation: {…}, adverts_offer: {…}, …}
console.js:35 [TranslateMessageFormatCompiler] COMPILE (undefined) {abuse: {…}, adverts: {…}, adverts_edit_popup: {…}, adverts_navigation: {…}, adverts_offer: {…}, …}

So, if i completely remove MESSAGE_FORMAT_CONFIG i got only COMPILE (undefined) messages not COMPILE (undefined) and then INTERPOLATE — it makes things a little faster but it is not enough.

Are there something is compiling hundred times? How to get rid of those hundreds COMPILE (undefined) messages?

artuska commented 6 years ago

UPD. This is not TranslateMessageFormatCompiler's issue — see https://github.com/ngx-translate/core/issues/955 and https://github.com/ngx-translate/core/pull/956.