diff --git a/.gitignore b/.gitignore index 44459f0f8..e62b1ce62 100644 --- a/.gitignore +++ b/.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 diff --git a/api/funkwhale_api/instance/dynamic_preferences_registry.py b/api/funkwhale_api/instance/dynamic_preferences_registry.py index 0edb94482..844fbb08b 100644 --- a/api/funkwhale_api/instance/dynamic_preferences_registry.py +++ b/api/funkwhale_api/instance/dynamic_preferences_registry.py @@ -58,15 +58,6 @@ class RavenDSN(types.StringPreference): field_kwargs = {"required": False} -@global_preferences_registry.register -class RavenEnabled(types.BooleanPreference): - show_in_api = True - section = raven - name = "front_enabled" - default = False - verbose_name = "Report front-end errors with Raven" - - @global_preferences_registry.register class InstanceNodeinfoEnabled(types.BooleanPreference): show_in_api = False diff --git a/changes/changelog.d/front-performance.enhancement b/changes/changelog.d/front-performance.enhancement new file mode 100644 index 000000000..03ca0e478 --- /dev/null +++ b/changes/changelog.d/front-performance.enhancement @@ -0,0 +1,51 @@ +Improved front-end performance by stripping unused dependencies, reducing bundle size +and enabling gzip compression + +Enable gzip compression [manual action suggested] +------------------------------------------------- + +Gzip compression will be enabled on new instances by default +and will reduce the amount of bandwidth consumed by your instance. + +If you with to benefit from gzip compression on your instance, +edit your reverse proxy virtualhost file (located at ``/etc/nginx/sites-available/funkwhale.conf``) and add the following snippet +in the server block, then reload your nginx server:: + + server { + # ... exiting configuration + + # compression settings + gzip on; + gzip_comp_level 5; + gzip_min_length 256; + gzip_proxied any; + gzip_vary on; + + gzip_types + application/atom+xml + application/javascript + application/json + application/ld+json + application/activity+json + application/manifest+json + application/rss+xml + application/vnd.geo+json + application/vnd.ms-fontobject + application/x-font-ttf + application/x-web-app-manifest+json + application/xhtml+xml + application/xml + font/opentype + image/bmp + image/svg+xml + image/x-icon + text/cache-manifest + text/css + text/plain + text/vcard + text/vnd.rim.location.xloc + text/vtt + text/x-component + text/x-cross-domain-policy; + # end of compression settings + } diff --git a/deploy/docker.proxy.template b/deploy/docker.proxy.template index 319f287e7..812027bfa 100644 --- a/deploy/docker.proxy.template +++ b/deploy/docker.proxy.template @@ -29,6 +29,40 @@ server { # HSTS add_header Strict-Transport-Security "max-age=31536000"; + # compression settings + gzip on; + gzip_comp_level 5; + gzip_min_length 256; + gzip_proxied any; + gzip_vary on; + + gzip_types + application/atom+xml + application/javascript + application/json + application/ld+json + application/activity+json + application/manifest+json + application/rss+xml + application/vnd.geo+json + application/vnd.ms-fontobject + application/x-font-ttf + application/x-web-app-manifest+json + application/xhtml+xml + application/xml + font/opentype + image/bmp + image/svg+xml + image/x-icon + text/cache-manifest + text/css + text/plain + text/vcard + text/vnd.rim.location.xloc + text/vtt + text/x-component + text/x-cross-domain-policy; + location / { include /etc/nginx/funkwhale_proxy.conf; proxy_pass http://fw/; diff --git a/deploy/nginx.template b/deploy/nginx.template index b81ecc61a..702dc05ee 100644 --- a/deploy/nginx.template +++ b/deploy/nginx.template @@ -43,6 +43,41 @@ server { root ${FUNKWHALE_FRONTEND_PATH}; + # compression settings + gzip on; + gzip_comp_level 5; + gzip_min_length 256; + gzip_proxied any; + gzip_vary on; + + gzip_types + application/atom+xml + application/javascript + application/json + application/ld+json + application/activity+json + application/manifest+json + application/rss+xml + application/vnd.geo+json + application/vnd.ms-fontobject + application/x-font-ttf + application/x-web-app-manifest+json + application/xhtml+xml + application/xml + font/opentype + image/bmp + image/svg+xml + image/x-icon + text/cache-manifest + text/css + text/plain + text/vcard + text/vnd.rim.location.xloc + text/vtt + text/x-component + text/x-cross-domain-policy; + + # end of compression settings location / { include /etc/nginx/funkwhale_proxy.conf; # this is needed if you have file import via upload enabled diff --git a/docker/nginx/conf.dev b/docker/nginx/conf.dev index 297cfa509..3e7a3515a 100644 --- a/docker/nginx/conf.dev +++ b/docker/nginx/conf.dev @@ -43,6 +43,39 @@ http { charset utf-8; client_max_body_size 30M; include /etc/nginx/funkwhale_proxy.conf; + # compression settings + gzip on; + gzip_comp_level 5; + gzip_min_length 256; + gzip_proxied any; + gzip_vary on; + + gzip_types + application/atom+xml + application/javascript + application/json + application/ld+json + application/activity+json + application/manifest+json + application/rss+xml + application/vnd.geo+json + application/vnd.ms-fontobject + application/x-font-ttf + application/x-web-app-manifest+json + application/xhtml+xml + application/xml + font/opentype + image/bmp + image/svg+xml + image/x-icon + text/cache-manifest + text/css + text/plain + text/vcard + text/vnd.rim.location.xloc + text/vtt + text/x-component + text/x-cross-domain-policy; location /front/ { proxy_pass http://funkwhale-front/front/; diff --git a/docs/configuration.rst b/docs/configuration.rst index 687447697..be3824502 100644 --- a/docs/configuration.rst +++ b/docs/configuration.rst @@ -182,7 +182,7 @@ work. We will store the necessary files in the ``/srv/funkwhale/custom`` directo mkdir custom cat < custom/settings.json { - "additionalStylesheets": ["/custom/custom.css"] + "additionalStylesheets": ["/front/custom/custom.css"] } EOF cat < custom/custom.css @@ -194,7 +194,7 @@ work. We will store the necessary files in the ``/srv/funkwhale/custom`` directo By executing the previous commands, you will end up with two files in your ``/srv/funkwhale/custom`` directory: -- ``settings.json`` will tell the front-end what stylesheets you want to load (``/custom/custom.css`` in this example) +- ``settings.json`` will tell the front-end what stylesheets you want to load (``/front/custom/custom.css`` in this example) - ``custom.css`` will hold your custom CSS The last step to make this work is to ensure both files are served by the reverse proxy. diff --git a/front/package.json b/front/package.json index 23894600e..adeb1fb19 100644 --- a/front/package.json +++ b/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", @@ -20,8 +20,7 @@ "lodash": "^4.17.10", "masonry-layout": "^4.2.2", "moment": "^2.22.2", - "raven-js": "^3.26.4", - "semantic-ui-css": "^2.3.3", + "semantic-ui-css": "^2.4.1", "showdown": "^1.8.6", "vue": "^2.5.17", "vue-gettext": "^2.1.0", @@ -49,7 +48,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, diff --git a/front/public/settings.json b/front/public/settings.json index 133fb5672..c25eb99f4 100644 --- a/front/public/settings.json +++ b/front/public/settings.json @@ -1,3 +1,5 @@ { - "additionalStylesheets": ["/custom.css"] + "additionalStylesheets": [ + "/front/custom.css" + ] } diff --git a/front/scripts/i18n-compile.sh b/front/scripts/i18n-compile.sh index 955913393..a5713df83 100755 --- a/front/scripts/i18n-compile.sh +++ b/front/scripts/i18n-compile.sh @@ -1,3 +1,7 @@ #!/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 diff --git a/front/src/App.vue b/front/src/App.vue index 6e6f45ff6..d61e5a837 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -43,10 +43,6 @@ :version="version" @show:shortcuts-modal="showShortcutsModal = !showShortcutsModal" > - @@ -56,18 +52,16 @@ diff --git a/front/src/assets/audio/default-cover.png b/front/src/assets/audio/default-cover.png index 86aa7acbd..a583124e2 100644 Binary files a/front/src/assets/audio/default-cover.png and b/front/src/assets/audio/default-cover.png differ diff --git a/front/src/components/About.vue b/front/src/components/About.vue index 16c58b173..90cfb7682 100644 --- a/front/src/components/About.vue +++ b/front/src/components/About.vue @@ -27,9 +27,9 @@

{{ instance.short_description.value }}

+ v-html="markdown.makeHtml(instance.long_description.value)">
@@ -43,8 +43,17 @@ export default { components: { Stats }, - created() { + data () { + return { + markdown: null + } + }, + created () { this.$store.dispatch("instance/fetchSettings") + let self = this + import('showdown').then(module => { + self.markdown = new module.default.Converter() + }) }, computed: { ...mapState({ diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue index e0fa2d4bb..a0543e1e3 100644 --- a/front/src/components/Footer.vue +++ b/front/src/components/Footer.vue @@ -20,7 +20,7 @@
-
@@ -60,7 +60,9 @@ - - - diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index d8029b1bd..f072ce808 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -16,8 +16,8 @@