Messages: Load languages asynchronously.

Reduces the size of the initial app bundle by about half.
This commit is contained in:
lain 2020-06-08 17:22:07 +02:00
parent acbef1ebdc
commit 99eaec8547
5 changed files with 80 additions and 32 deletions

View file

@ -47,7 +47,8 @@ export default {
}), }),
created () { created () {
// Load the locale from the storage // Load the locale from the storage
this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
destroyed () { destroyed () {

View file

@ -32,7 +32,7 @@ import _ from 'lodash'
export default { export default {
computed: { computed: {
languageCodes () { languageCodes () {
return Object.keys(languagesObject) return languagesObject.languages
}, },
languageNames () { languageNames () {
@ -43,7 +43,6 @@ export default {
get: function () { return this.$store.getters.mergedConfig.interfaceLanguage }, get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
set: function (val) { set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val
} }
} }
}, },

View file

@ -7,34 +7,75 @@
// sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json // sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json
// There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry. // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
const loaders = {
ar: () => import('./ar.json'),
ca: () => import('./ca.json'),
cs: () => import('./cs.json'),
de: () => import('./de.json'),
eo: () => import('./eo.json'),
es: () => import('./es.json'),
et: () => import('./et.json'),
eu: () => import('./eu.json'),
fi: () => import('./fi.json'),
fr: () => import('./fr.json'),
ga: () => import('./ga.json'),
he: () => import('./he.json'),
hu: () => import('./hu.json'),
it: () => import('./it.json'),
ja: () => import('./ja_pedantic.json'),
ja_easy: () => import('./ja_easy.json'),
ko: () => import('./ko.json'),
nb: () => import('./nb.json'),
nl: () => import('./nl.json'),
oc: () => import('./oc.json'),
pl: () => import('./pl.json'),
pt: () => import('./pt.json'),
ro: () => import('./ro.json'),
ru: () => import('./ru.json'),
te: () => import('./te.json'),
zh: () => import('./zh.json')
}
const messages = { const messages = {
ar: require('./ar.json'), languages: [
ca: require('./ca.json'), 'ar',
cs: require('./cs.json'), 'ca',
de: require('./de.json'), 'cs',
en: require('./en.json'), 'de',
eo: require('./eo.json'), 'en',
es: require('./es.json'), 'eo',
et: require('./et.json'), 'es',
eu: require('./eu.json'), 'et',
fi: require('./fi.json'), 'eu',
fr: require('./fr.json'), 'fi',
ga: require('./ga.json'), 'fr',
he: require('./he.json'), 'ga',
hu: require('./hu.json'), 'he',
it: require('./it.json'), 'hu',
ja: require('./ja_pedantic.json'), 'it',
ja_easy: require('./ja_easy.json'), 'ja',
ko: require('./ko.json'), 'ja_easy',
nb: require('./nb.json'), 'ko',
nl: require('./nl.json'), 'nb',
oc: require('./oc.json'), 'nl',
pl: require('./pl.json'), 'oc',
pt: require('./pt.json'), 'pl',
ro: require('./ro.json'), 'pt',
ru: require('./ru.json'), 'ro',
te: require('./te.json'), 'ru',
zh: require('./zh.json') 'te',
'zh'
],
default: {
en: require('./en.json')
},
setLanguage: async (i18n, language) => {
if (loaders[language]) {
let messages = await loaders[language]()
i18n.setLocaleMessage(language, messages)
}
i18n.locale = language
}
} }
export default messages export default messages

View file

@ -46,11 +46,13 @@ Vue.use(VBodyScrollLock)
const i18n = new VueI18n({ const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary // By default, use the browser locale, we will update it if neccessary
locale: currentLocale, locale: 'en',
fallbackLocale: 'en', fallbackLocale: 'en',
messages messages: messages.default
}) })
messages.setLanguage(i18n, currentLocale)
const persistedStateOptions = { const persistedStateOptions = {
paths: [ paths: [
'config', 'config',

View file

@ -1,5 +1,6 @@
import { set, delete as del } from 'vue' import { set, delete as del } from 'vue'
import { setPreset, applyTheme } from '../services/style_setter/style_setter.js' import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
import messages from '../i18n/messages'
const browserLocale = (window.navigator.language || 'en').split('-')[0] const browserLocale = (window.navigator.language || 'en').split('-')[0]
@ -115,6 +116,10 @@ const config = {
case 'customTheme': case 'customTheme':
case 'customThemeSource': case 'customThemeSource':
applyTheme(value) applyTheme(value)
break
case 'interfaceLanguage':
messages.setLanguage(this.getters.i18n, value)
break
} }
} }
} }