unraid/webgui

Calls to CSS/JS should be wrapped with autov()

Closed this issue · 3 comments

ljm42 commented

The following files contain references to CSS/JS files that should be wrapped with autov( ) to prevent caching issues:

https://github.com/limetech/webgui/blob/master/plugins/dynamix.plugin.manager/Plugins.page#L26
<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.filetree.css">

https://github.com/limetech/webgui/blob/master/plugins/dynamix.vm.manager/templates/Custom.form.php
https://github.com/limetech/webgui/blob/master/plugins/dynamix.vm.manager/templates/LibreELEC.form.php
https://github.com/limetech/webgui/blob/master/plugins/dynamix.vm.manager/templates/OpenELEC.form.php
https://github.com/limetech/webgui/blob/master/plugins/dynamix.vm.manager/templates/XML_Expert.form.php

<link rel="stylesheet" href="/plugins/dynamix.vm.manager/scripts/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/plugins/dynamix.vm.manager/scripts/codemirror/addon/hint/show-hint.css">
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/lib/codemirror.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/addon/display/placeholder.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/addon/fold/foldcode.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/addon/hint/show-hint.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/addon/hint/xml-hint.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/addon/hint/libvirt-schema.js"></script>
<script src="/plugins/dynamix.vm.manager/scripts/codemirror/mode/xml/xml.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix.vm.manager/vnc.html

<link rel="stylesheet" href="novnc/app/styles/base.css" />
<script type="text/javascript" src="novnc/app/error-handler.js"></script>
<script src="novnc/vendor/promise.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/DisplaySettings.page#L29
<script src="/webGui/javascript/jquery.filedrop.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/DashboardApps.page#L10-L11

<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.ui.css">
<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.switchbutton.css">

https://github.com/limetech/webgui/blob/master/plugins/dynamix/UserAdd.page#L36
<script src="/webGui/javascript/jquery.filedrop.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/UserEdit.page#L43
<script src="/webGui/javascript/jquery.filedrop.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/Syslinux.page#L36
<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.switchbutton.css">

https://github.com/limetech/webgui/blob/master/plugins/dynamix/include/Boot.php#L19

<link type="text/css" rel="stylesheet" href="/webGui/styles/default-fonts.css">
<script src="/webGui/javascript/dynamix.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/include/Feedback.php#L78
<script type="text/javascript" src="/webGui/javascript/dynamix.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/include/ReplaceKey.php#L21
<script src="/webGui/javascript/dynamix.js"></script>

https://github.com/limetech/webgui/blob/master/plugins/dynamix/include/TrialRequest.php#L20
<script src="/webGui/javascript/dynamix.js"></script>

Additionally, this line has a typo, where an extra ">" is inside the call to autov:

https://github.com/limetech/webgui/blob/master/plugins/dynamix/include/CryptoBenchmark.php#L31
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/font-awesome.css">)?>">

Once all the CSS/JS files are wrapped with calls to autov, it would be ideal to modify the nginx config to enable gzip and set a long cache duration on these directories:

  /webGui/javascript/
  /webGui/styles/
ljm42 commented

I'd like to suggest this for rc.nginx:

    #
    # enable compression of JS/CSS files
    # if version tag on querystring, tell browser to cache indefinitely
    #
    location ~ \.(js|css)$ {
        gzip on;
        gzip_disable "MSIE [1-6]\.";
        gzip_types text/css application/javascript text/javascript application/x-javascript;
        if ( $args ~ "v=" ) { 
            expires max;
         }
    }

We added that block to rc.nginx. Thanks!

ljm42 commented

cool, should be a nice little optimization :)