Load translations separately to reduce bandwidth usage

.gitignore

@@ -93,5 +93,6 @@ po/*.po
 docs/swagger
 _build
 front/src/translations.json
+front/src/translations/*.json
 front/locales/en_US/LC_MESSAGES/app.po
 *.prof

front/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "scripts/i18n-compile.sh && vue-cli-service serve --port ${VUE_PORT:-8000} --host ${VUE_HOST:-0.0.0.0}",
+    "serve": "vue-cli-service serve --port ${VUE_PORT:-8000} --host ${VUE_HOST:-0.0.0.0}",
     "build": "scripts/i18n-compile.sh && vue-cli-service build",
     "lint": "vue-cli-service lint",
     "i18n-extract": "scripts/i18n-extract.sh",
@@ -49,7 +49,8 @@
     "node-sass": "^4.9.3",
     "sass-loader": "^7.1.0",
     "sinon": "^6.1.5",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.5.17",
+    "webpack-bundle-size-analyzer": "^3.0.0"
   },
   "eslintConfig": {
     "root": true,

front/scripts/i18n-compile.sh

 #!/bin/bash -eux
-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
-find locales -name '*.po' | xargs $(yarn bin)/gettext-compile --output src/translations.json
+locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | grep -v 'en_US' | xargs echo)
+for locale in $locales; do
+    find "locales/$locale" -name '*.po' | $(yarn bin)/gettext-compile locales/$locale/LC_MESSAGES/app.po --output src/translations/$locale.json
+done
+
+# find locales -name '*.po' | xargs $(yarn bin)/gettext-compile --output src/translations.json

front/src/App.vue

@@ -61,13 +61,12 @@ import {mapState} from 'vuex'
 import { WebSocketBridge } from 'django-channels'
 import GlobalEvents from '@/components/utils/global-events'
 
-import translations from '@/translations'
-
 import Sidebar from '@/components/Sidebar'
 import AppFooter from '@/components/Footer'
 import Raven from '@/components/Raven'
 import ServiceMessages from '@/components/ServiceMessages'
 
+import locales from './locales'
 import PlaylistModal from '@/components/playlists/PlaylistModal'
 import ShortcutsModal from '@/components/ShortcutsModal'
 
@@ -139,7 +138,7 @@ export default {
     },
     autodetectLanguage () {
       let userLanguage = navigator.language || navigator.userLanguage
-      let available = _.keys(translations)
+      let available = locales.locales.map(e => { return e.code })
       let matching = available.filter((a) => {
         return userLanguage.replace('-', '_') === a
       })

front/src/components/Footer.vue

@@ -20,7 +20,7 @@
           <div class="ui form">
             <div class="ui field">
               <label><translate>Change language</translate></label>
-              <select class="ui dropdown" v-model="$language.current">
+              <select class="ui dropdown" :value="$language.current" @change="updateLanguage($event.target.value)">
                 <option v-for="(language, key) in $language.available" :key="key" :value="key">{{ language }}</option>
               </select>
             </div>
@@ -60,7 +60,9 @@
 </template>
 
 <script>
+import Vue from "vue"
 import { mapState } from "vuex"
+import axios from 'axios'
 
 export default {
   props: ["version"],
@@ -74,6 +76,13 @@ export default {
       if (confirm) {
         this.$store.commit("instance/instanceUrl", null)
       }
+    },
+    updateLanguage(value) {
+      let self = this
+      import(`../translations/${value}.json`).then((response) =>{
+        Vue.$translations[value] = response.default[value]
+        self.$language.current = value
+      })
     }
   },
   computed: {

front/src/main.js

@@ -14,7 +14,6 @@ import VueLazyload from 'vue-lazyload'
 import store from './store'
 import GetTextPlugin from 'vue-gettext'
 import { sync } from 'vuex-router-sync'
-import translations from './translations.json'
 import locales from '@/locales'
 
 import filters from '@/filters' // eslint-disable-line
@@ -54,7 +53,7 @@ Vue.use(GetTextPlugin, {
       }
     }
   },
-  translations: translations,
+  translations: {},
   silent: true
 })
 

front/vue.config.js

 
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+let plugins = []
+if (process.env.BUNDLE_ANALYZE === '1') {
+  plugins.push(new BundleAnalyzerPlugin())
+}
 module.exports = {
   baseUrl: '/front/',
   pages: {
@@ -17,6 +22,7 @@ module.exports = {
     config.optimization.delete('splitChunks')
   },
   configureWebpack: {
+    plugins: plugins,
     resolve: {
       alias: {
         'vue$': 'vue/dist/vue.esm.js'

front/yarn.lock

@@ -2040,6 +2040,11 @@ commander@^2.13.0:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
 
+commander@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -3274,7 +3279,7 @@ filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
-filesize@^3.5.11:
+filesize@^3.5.11, filesize@^3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
 
@@ -3900,6 +3905,11 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+humanize@0.0.9:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/humanize/-/humanize-0.0.9.tgz#1994ffaecdfe9c441ed2bdac7452b7bb4c9e41a4"
+  integrity sha1-GZT/rs3+nEQe0r2sdFK3u0yeQaQ=
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -7823,6 +7833,15 @@ webpack-bundle-analyzer@^2.13.1:
     opener "^1.4.3"
     ws "^4.0.0"
 
+webpack-bundle-size-analyzer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-size-analyzer/-/webpack-bundle-size-analyzer-3.0.0.tgz#c0657e9787cf644a0b91d891ae15553ba61bbc71"
+  integrity sha512-GfQ/Mch1o2MGonGPIMawwlxXOmYp/F8EXiT9txDO6qASo7G5hODngWMNW1KkJxeYRvgMUuPgbSsmdsXEsBNEeg==
+  dependencies:
+    commander "^2.19.0"
+    filesize "^3.6.1"
+    humanize "0.0.9"
+
 webpack-chain@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-4.8.0.tgz#06fc3dbb9f2707d4c9e899fc6250fbcf2afe6fd1"