From e1f1a3aa12dfd820b7dbc4e7e00bdfb387a43bc5 Mon Sep 17 00:00:00 2001 From: djmaze Date: Sun, 6 Sep 2020 11:13:43 +0200 Subject: [PATCH] Embed boot.min.js and boot.min.css into index.html for fast response --- README.md | 25 ++++--- dev/App/Admin.js | 6 +- dev/Knoin/Knoin.js | 2 +- dev/Styles/@Boot.css | 4 -- dev/Styles/Layout.less | 4 -- dev/boot.js | 67 ++++++++----------- .../0.0.0/app/libraries/RainLoop/Service.php | 15 +++-- rainloop/v/0.0.0/app/templates/Index.html | 8 +-- 8 files changed, 57 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index f5551002f..514688229 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ This fork has the following changes: * Removed Sentry (Application Monitoring and Error Tracking Software) * Replaced gulp-uglify with gulp-terser * CRLF => LF line endings +* Embed boot.js and boot.css into index.html * Ongoing removal of old JavaScript code (things are native these days) ### Removal of old JavaScript @@ -86,23 +87,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill |js/* |1.14.0 |native | |----------- |--------: |--------: | -|admin.js |2.130.942 | 938.738 | -|app.js |4.184.455 |2.556.224 | -|boot.js | 671.522 | 7.265 | +|admin.js |2.130.942 | 938.371 | +|app.js |4.184.455 |2.556.162 | +|boot.js | 671.522 | 5.889 | |libs.js | 647.614 | 312.343 | |polyfills.js | 325.834 | 0 | -|TOTAL |7.960.367 |3.814.570 | +|TOTAL |7.960.367 |3.812.765 | |js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli | |--------------- |--------: |--------: |--------: |--------: |--------: | -|admin.min.js | 252.147 | 128.761 | 73.657 | 37.546 | 32.178 | -|app.min.js | 511.202 | 349.280 |140.462 | 91.746 | 73.635 | -|boot.min.js | 66.007 | 4.258 | 22.567 | 1.946 | 1.648 | +|admin.min.js | 252.147 | 128.725 | 73.657 | 37.530 | 32.194 | +|app.min.js | 511.202 | 349.257 |140.462 | 91.739 | 73.672 | +|boot.min.js | 66.007 | 3.207 | 22.567 | 1.598 | 1.369 | |libs.min.js | 572.545 | 295.754 |176.720 | 91.521 | 80.871 | |polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 | -|TOTAL |1.434.353 | 778.053 |424.718 |222.759 |188.332 | +|TOTAL |1.434.353 | 776.943 |424.718 |222.388 |188.106 | -655.728 bytes (201.830 gzip) is not much, but it feels faster. +657.410 bytes (202.330 gzip) is not much, but it feels faster. ### CSS changes @@ -127,8 +128,10 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill |css/* |1.14.0 |native |gzip 1.14 |gzip |brotli | |-------------- |-------: |-------: |------: |------: |------: | -|app.css | 340.334 | 255.729 | 46,959 | 36.948 | 31.049 | -|app.min.css | 274.791 | 208.793 | 39,618 | 32.238 | 27.339 | +|app.css | 340.334 | 252.797 | 46,959 | 36.394 | 30.615 | +|app.min.css | 274.791 | 206.474 | 39.618 | 32.238 | 27.339 | +|boot.css | | 2.538 | | 837 | 668 | +|boot.min.css | | 2.055 | | 732 | 560 | ### PHP73 branch diff --git a/dev/App/Admin.js b/dev/App/Admin.js index 812707771..a83740464 100644 --- a/dev/App/Admin.js +++ b/dev/App/Admin.js @@ -93,14 +93,10 @@ class AdminApp extends AbstractApp { }); } - bootend(bootendCallback = null) { + bootend() { if (window.progressJs) { progressJs.end(); } - - if (bootendCallback) { - bootendCallback(); - } } bootstart() { diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index d9e5dfff1..02fe80d75 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -32,7 +32,7 @@ export const ViewType = { * @returns {void} */ export function hideLoading() { - qs('#rl-content').classList.add('rl-content-show'); + qs('#rl-content').hidden = false; qs('#rl-loading').remove(); } diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css index 57611da7a..b5b6ae978 100644 --- a/dev/Styles/@Boot.css +++ b/dev/Styles/@Boot.css @@ -10,10 +10,6 @@ body { color: #333; } -#rl-content, #rl-loading-error { - display: none; -} - #rl-loading, #rl-loading-error { font-size: 30px; line-height: 130%; diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index f0e98258b..f133fc468 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -419,10 +419,6 @@ html.rl-ctrl-key-pressed { } } -.rl-content-show { - display: block !important; -} - html.rl-mobile .hide-on-mobile { display: none !important; } diff --git a/dev/boot.js b/dev/boot.js index 1012ca6a5..0d8bc6da4 100644 --- a/dev/boot.js +++ b/dev/boot.js @@ -2,7 +2,7 @@ (win => { const - doc = win.document, + doc = document, app = doc.getElementById('rl-app'), options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {}, @@ -17,7 +17,7 @@ const const cookieName = encodeURIComponent(name+('session' === type ? win.name || (win.name = Date.now()) : '')); // initialise if there's already data - let data = document.cookie.match('(^|;) ?'+cookieName+'=([^;]*)(;|$)'); + let data = doc.cookie.match('(^|;) ?'+cookieName+'=([^;]*)(;|$)'); data = data ? decodeURIComponent(data[2]) : null; data = data ? JSON.parse(data) : {}; @@ -25,7 +25,7 @@ const getItem: key => data[key] === undefined ? null : data[key], setItem: function (key, value) { data[key] = ''+value; // forces the value to a string - document.cookie = cookieName+'='+encodeURIComponent(JSON.stringify(data)) + doc.cookie = cookieName+'='+encodeURIComponent(JSON.stringify(data)) +"; expires="+('local' === type ? (new Date(Date.now()+(365*24*60*60*1000))).toGMTString() : '') +"; path=/; samesite=strict"; } @@ -40,17 +40,8 @@ const setTimestamp = () => storage().setItem(TIME_KEY, timestamp()), showError = () => { - const oR = doc.getElementById('rl-loading'), - oL = doc.getElementById('rl-loading-error'); - - if (oR) { - oR.style.display = 'none'; - } - - if (oL) { - oL.style.display = 'block'; - } - + doc.getElementById('rl-loading').hidden = true; + doc.getElementById('rl-loading-error').hidden = false; p.end(); }, @@ -104,11 +95,6 @@ let container = doc.querySelector('.progressjs'), RL_APP_DATA_STORAGE = {}; -p.set(1); - -Storage('local'); -Storage('session'); - win.rl = { hash: { // getHash @@ -150,13 +136,10 @@ win.rl = { if (RL_APP_DATA_STORAGE.Title) { title += (title ? ' - ' : '') + RL_APP_DATA_STORAGE.Title; } - document.title = null == title ? '' : '' + title; + doc.title = null == title ? '' : '' + title; } }; -// init section -setInterval(setTimestamp, 60000); // 1m - /** * @param {mixed} appData * @returns {void} @@ -229,22 +212,28 @@ win.__initAppData = appData => { } }; -if (app) { - ['app-css','app-theme-link'].forEach(css => { - css = doc.getElementById(css); - css.href = css.dataset.href; - }); +p.set(1); - loadScript('./?/' - + (options.admin ? 'Admin' : '') - + 'AppData@' - + (options.mobile ? 'mobile' : 'no-mobile') - + (options.mobileDevice ? '-1' : '-0') - + '/' - + (rl.hash.get() || '0') - + '/' - + Math.random().toString().substr(2) - + '/').then(() => {}); -} +Storage('local'); +Storage('session'); + +// init section +setInterval(setTimestamp, 60000); // 1m + +['app-css','app-theme-link'].forEach(css => { + css = doc.getElementById(css); + css.href = css.dataset.href; +}); + +loadScript('./?/' + + (options.admin ? 'Admin' : '') + + 'AppData@' + + (options.mobile ? 'mobile' : 'no-mobile') + + (options.mobileDevice ? '-1' : '-0') + + '/' + + (rl.hash.get() || '0') + + '/' + + Math.random().toString().substr(2) + + '/').then(() => {}); })(this); diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php b/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php index 19b02cf39..3c02c4f1b 100644 --- a/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php +++ b/rainloop/v/0.0.0/app/libraries/RainLoop/Service.php @@ -234,15 +234,17 @@ class Service list($sLanguage, $sTheme) = $this->oActions->GetLanguageAndTheme($bAdmin, $bMobile); - $bAppJsDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_js', false); - $bAppCssDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_css', false); + $oConfig = $this->oActions->Config(); - $sFaviconUrl = (string) $this->oActions->Config()->Get('webmail', 'favicon_url', ''); + $bAppJsDebug = !!$oConfig->Get('labs', 'use_app_debug_js', false); + $bAppCssDebug = !!$oConfig->Get('labs', 'use_app_debug_css', false); + + $sFaviconUrl = (string) $oConfig->Get('webmail', 'favicon_url', ''); $sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png'); $sAppleTouchLink = $sFaviconUrl ? '' : $this->staticPath('apple-touch-icon.png'); - $LoadingDescription = $this->oActions->Config()->Get('webmail', 'loading_description', 'RainLoop'); + $LoadingDescription = $oConfig->Get('webmail', 'loading_description', 'RainLoop'); $aTemplateParameters = array( '{{BaseAppHeadScriptLink}}' => '', @@ -253,11 +255,12 @@ class Service '{{BaseAppThemeCssLink}}' => $this->oActions->ThemeLink($sTheme, $bAdmin), '{{BaseAppPolyfillsScriptLink}}' => '', '{{BaseAppBootScriptLink}}' => $this->staticPath('js/'.($bAppJsDebug ? '' : 'min/').'boot'.($bAppJsDebug ? '' : '.min').'.js'), + '{{BaseAppBootScript}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/js/min/boot.min.js'), '{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2', '{{BaseContentSecurityPolicy}}' => '', '{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr', '{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'), - '{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot'.($bAppCssDebug ? '' : '.min').'.css'), + '{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot.min.css'), '{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8') ); @@ -272,7 +275,7 @@ class Service $aTemplateParameters['{{BaseHash}}'] = \md5( \implode('~', array( $bAdmin ? '1' : '0', - \md5($this->oActions->Config()->Get('cache', 'index', '')), + \md5($oConfig->Get('cache', 'index', '')), $this->oActions->Plugins()->Hash(), Utils::WebVersionPath(), APP_VERSION, diff --git a/rainloop/v/0.0.0/app/templates/Index.html b/rainloop/v/0.0.0/app/templates/Index.html index 07afd7321..6c034e242 100644 --- a/rainloop/v/0.0.0/app/templates/Index.html +++ b/rainloop/v/0.0.0/app/templates/Index.html @@ -13,7 +13,7 @@ {{BaseAppFaviconPngLinkTag}} {{BaseAppFaviconTouchLinkTag}} - + @@ -29,8 +29,8 @@
-
An error occurred.
Please refresh the page and try again.
-
+ +