Split translations

Makefile

@@ -31,11 +31,15 @@ all:
 	@echo choose a target from: clean makemessages translations
 
 clean:
-	rm -f $(TEMPLATE_POT) $(OUTPUT_DIR)/translations.json
+	rm -rf $(TEMPLATE_POT)
 
 makemessages: $(TEMPLATE_POT)
 
-translations: ./$(OUTPUT_DIR)/translations.json
+translations: $(LOCALE_FILES)
+	mkdir -p $(OUTPUT_DIR)/translations
+	@for lang in $(LOCALES); do \
+		gettext-compile --output $(OUTPUT_DIR)/translations/$$lang.json $(OUTPUT_DIR)/locale/$$lang/LC_MESSAGES/app.po; \
+	done;
 
 # Create a main .pot template, then generate .po files for each available language.
 # Thanx to Systematic: https://github.com/Polyconseil/systematic/blob/866d5a/mk/main.mk#L167-L183
@@ -58,7 +62,3 @@ $(TEMPLATE_POT): $(GETTEXT_SOURCES)
 			msgattrib --no-wrap --no-obsolete -o $$PO_FILE $$PO_FILE || break; \
 		fi; \
 	done;
-
-$(OUTPUT_DIR)/translations.json: $(LOCALE_FILES)
-	mkdir -p $(OUTPUT_DIR)
-	gettext-compile --output $@ $(LOCALE_FILES)

src/main.js

@@ -7,17 +7,13 @@ import VueMeta from 'vue-meta'
 import App from './App.vue'
 import Home from './views/Home.vue'
 import Help from './views/Help'
-import News from './views/News'
 import Instances from './views/Instances'
-import HallOfFame from './views/Hall-Of-Fame'
 import FAQ from './views/FAQ'
 import AllContentSelections from './views/All-Content-Selections'
 
 import './scss/main.scss'
 import CommonMixins from './mixins/CommonMixins'
 
-const translations = require('./translations.json')
-
 Vue.use(VueRouter)
 
 // ############# I18N ##############
@@ -32,12 +28,8 @@ const aliasesLanguages = {
 }
 const allLocales = Object.keys(availableLanguages).concat(Object.keys(aliasesLanguages))
 
-Vue.use(GetTextPlugin, {
+const defaultLanguage = 'en_US'
-  translations,
+let currentLanguage = defaultLanguage
-  availableLanguages,
-  defaultLanguage: 'en_US',
-  silent: false
-})
 
 const localePath = window.location.pathname
   .replace(/^\//, '')
@@ -46,26 +38,46 @@ const localePath = window.location.pathname
 const languageFromLocalStorage = localStorage.getItem('language')
 
 if (allLocales.includes(localePath)) {
-  Vue.config.language = aliasesLanguages[localePath] ? aliasesLanguages[localePath] : localePath
+  currentLanguage = aliasesLanguages[localePath] ? aliasesLanguages[localePath] : localePath
-  localStorage.setItem('language', Vue.config.language)
+  localStorage.setItem('language', currentLanguage)
 } else if (languageFromLocalStorage) {
-  Vue.config.language = languageFromLocalStorage
+  currentLanguage = languageFromLocalStorage
 } else {
   const navigatorLanguage = window.navigator.userLanguage || window.navigator.language
   const snakeCaseLanguage = navigatorLanguage.replace('-', '_')
-  Vue.config.language = aliasesLanguages[snakeCaseLanguage] ? aliasesLanguages[snakeCaseLanguage] : snakeCaseLanguage
+  currentLanguage = aliasesLanguages[snakeCaseLanguage] ? aliasesLanguages[snakeCaseLanguage] : snakeCaseLanguage
 }
 
 Vue.filter('translate', value => {
   return value ? Vue.prototype.$gettext(value.toString()) : ''
 })
 
+const p = currentLanguage === defaultLanguage
+  ? Promise.resolve({ default: {} })
+  : import('../public/translations/' + currentLanguage + '.json')
+
+p.catch(err => {
+  console.error('Cannot load translations.', err)
+  return { default: {} }
+}).then(module => {
+  Vue.use(GetTextPlugin, {
+    translations: module.default,
+    availableLanguages,
+    defaultLanguage: 'en_US',
+    silent: process.env.NODE_ENV === 'development'
+  })
+
+  Vue.config.language = currentLanguage
+
   // ###########################
 
   Vue.use(VueMeta)
 
   Vue.mixin(CommonMixins)
 
+  const HallOfFame = () => import('./views/Hall-Of-Fame')
+  const News = () => import('./views/News')
+
   const routes = [
     {
       path: '/',
@@ -174,3 +186,4 @@ new Vue({ // eslint-disable-line no-new
     },
     render: h => h(App)
   })
+})