Verified Commit ba68246e authored by Agate's avatar Agate 💬

Load translations separately to reduce bandwidth usage

parent 12f36705
......@@ -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
......@@ -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,
......
#!/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
......@@ -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
})
......
......@@ -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: {
......
......@@ -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
})
......
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'
......
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment