Vue UI freezes the browser during translation

[AniaKru95]

Version

5.0.0-beta.7

Environment info

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
  Binaries:
    Node: 14.15.0 - ~\AppData\Roaming\JetBrains\PyCharm2021.2\node\node-v14.15.0-win-x64\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - ~\AppData\Roaming\JetBrains\PyCharm2021.2\node\node-v14.15.0-win-x64\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli: ^4.5.13 => 4.5.13
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-unit-mocha: ^4.5.13 => 4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/cli-ui:  4.5.13
    @vue/cli-ui-addon-webpack:  4.5.13
    @vue/cli-ui-addon-widgets:  4.5.13
    @vue/compiler-core:  3.2.19
    @vue/compiler-dom:  3.2.19
    @vue/component-compiler-utils:  3.2.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/shared:  3.2.19
    @vue/test-utils: ^1.2.2 => 1.2.2
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    typescript:  4.1.6
    vue: ^2.6.11 => 2.6.14
    vue-apexcharts: ^1.6.2 => 1.6.2
    vue-cli-plugin-i18n: ^2.3.1 => 2.3.1
    vue-click-outside: ^1.1.0 => 1.1.0
    vue-codemod:  0.0.5
    vue-crontab: 0.0.4 => 0.0.4
    vue-eslint-parser:  7.10.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.26.3 => 8.26.7
    vue-i18n-extract:  1.0.2
    vue-loader:  15.9.8 (16.5.0)
    vue-multiselect: ^2.1.6 => 2.1.6
    vue-router: ^3.5.3 => 3.5.3
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.11 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vue-time-date-range-picker: ^1.4.0 => 1.4.0
    vue2-daterange-picker: ^0.6.6 => 0.6.6
    vuetify: ^2.5.8 => 2.5.8
    vuetify-datetime-picker: ^2.1.1 => 2.1.1
    vuex: ^3.6.2 => 3.6.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Create en.json in locales folder. Data contains 370 records.
2. Run vue ui
3. Click "Localizations" on the left panel. It is plugin: vue-i18n
4. Select "en" language to load file.
   Then browser is freezeng and after 5 minutes data is loaded.

What is expected?

Faster data loading

What is actually happening?

Browser is freezing and long duration for loading data

[badrkacimi]

use lazy loading translations. Go check : https://kazupon.github.io/vue-i18n/guide/lazy-loading.html

[AniaKru95]

Hi,

Thanks for your reply.
I changed my code to lazy loading, and nothing changed.

Here's my code:

import VueI18n from 'vue-i18n'
import axios from 'axios'
import messages from './locales/en'
Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages // set locale messages
})

const loadedLanguages = ['en'] // our default language that is preloaded

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync(lang) {
  // If the same language
  if (i18n.locale === lang) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language was already loaded
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language hasn't been loaded yet
  return import(/* webpackChunkName: "lang-[request]" */ `./locales/${lang}.json`).then(
    messages => {
      i18n.setLocaleMessage(lang, messages.default)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    }
  )
}

Screen result in the browser. Content is cut, and after 5 minutes all data is loaded.

[badrkacimi]

Hi,

I think it related to your browser, try another one and check if any proxy is on

[AniaKru95]

I checked in:
Firefox (94.0.1 (64 bit)) - problem exists
Chrome (95.0.4638.69 (64-bit)) - problem exists
Internet explorer - ui does not work at all, but it's not problem for me.
Also, it isn't problem with proxy.

I saw another strange issue.
When all data has been loaded in "en" and then I changed to my locale "pl" - data translated fast.
But when I returned to language "en", ui is freezing again.

[badrkacimi]

change

i18n.setLocaleMessage(lang, messages);
to

i18n.setLocaleMessage(lang, Object.freeze(messages))

and to be more specific this issue isn't realted to vuejs but in the vue-cli-plugin-i18n :
https://github.com/intlify/vue-cli-plugin-i18n/issues

[AniaKru95]

Ok, I write there also.
Unfortunately this change does not help. UI is freezing all the time :(

[LinusBorg]

Aks for help at the mentioned repo. feel free to open a new issue here if it turns out to be a Vue UI related problem