From 55f74c5d108f2c6611766a6b5bd36edc58c7db72 Mon Sep 17 00:00:00 2001 From: djmaze Date: Mon, 10 Aug 2020 11:32:05 +0200 Subject: [PATCH] Compress boot.js even more --- README.md | 18 ++++++++--------- dev/App/User.js | 24 +++++++++++++--------- dev/Common/Booter.js | 45 ++++++++++++++++++++++++----------------- dev/Storage/RainLoop.js | 2 +- 4 files changed, 51 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 92a8f56df..1060e385a 100644 --- a/README.md +++ b/README.md @@ -75,23 +75,23 @@ Things might work in Edge 15-18, Firefox 47-62 and Chrome 54-68 due to one polyf |js/* |1.14.0 |native |gzip 1.14 |gzip | |----------- |--------: |--------: |--------: |--------: | -|admin.js |2.130.942 |1.210.342 | 485.481 | 297.204 | -|app.js |4.184.455 |2.954.385 | 932.725 | 690.805 | -|boot.js | 671.522 | 52.263 | 169.502 | 17.146 | +|admin.js |2.130.942 |1.210.331 | 485.481 | 297.342 | +|app.js |4.184.455 |2.950.323 | 932.725 | 689.992 | +|boot.js | 671.522 | 46.647 | 169.502 | 16.138 | |libs.js | 647.614 | 437.187 | 194.728 | 133.728 | |polyfills.js | 325.834 | 0 | 71.825 | 0 | -|TOTAL js |7.960.367 |4.665.985 |1.854.261 |1.138.883 | +|TOTAL js |7.960.367 |4.644.488 |1.854.261 |1.137.200 | |js/min/* |1.14.0 |native |gzip 1.14 |gzip | |--------------- |--------: |--------: |--------: |--------: | -|admin.min.js | 252.147 | 156.114 | 73.657 | 44.592 | -|app.min.js | 511.202 | 384.047 |140.462 |101.496 | -|boot.min.js | 66.007 | 6.187 | 22.567 | 2.515 | +|admin.min.js | 252.147 | 156.113 | 73.657 | 44.598 | +|app.min.js | 511.202 | 383.798 |140.462 |101.450 | +|boot.min.js | 66.007 | 5.970 | 22.567 | 2.420 | |libs.min.js | 572.545 | 392.436 |176.720 |123.484 | |polyfills.min.js | 32.452 | 0 | 11.312 | 0 | -|TOTAL js/min |1.434.353 | 938.784 |424.718 |272.087 | +|TOTAL js/min |1.434.353 | 938.317 |424.718 |271.952 | -495.569 bytes (152.631 gzip) is not much, but it feels faster. +496.036 bytes (152.766 gzip) is not much, but it feels faster. |css/* |1.14.0 |native | diff --git a/dev/App/User.js b/dev/App/User.js index af806bb01..795de94f5 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -11,8 +11,6 @@ import { mailToHelper } from 'Common/Utils'; -import { jassl } from 'Common/Jassl'; - import { Layout, Capa, @@ -88,6 +86,8 @@ import { hideLoading, routeOff, routeOn, setHash, startScreens, showScreenPopup import { AbstractApp } from 'App/Abstract'; +const doc = window.document; + if (!window.ResizeObserver) { window.ResizeObserver = class { constructor(callback) { @@ -176,7 +176,7 @@ class AppUser extends AbstractApp { const img = userBackground(Settings.settingsGet('UserBackgroundHash')); if (img) { $htmlCL.add('UserBackground'); - window.document.body.style.backgroundImage = "url("+img+")"; + doc.body.style.backgroundImage = "url("+img+")"; } }, Magics.Time1s); } @@ -916,7 +916,7 @@ class AppUser extends AbstractApp { if (mode) { source.classList.add('resizable'); if (!source.querySelector('.resizer')) { - const resizer = window.document.createElement('div'), + const resizer = doc.createElement('div'), cssint = s => parseFloat(window.getComputedStyle(source, null).getPropertyValue(s).replace('px', '')); resizer.className = 'resizer'; source.appendChild(resizer); @@ -973,8 +973,8 @@ class AppUser extends AbstractApp { } initHorizontalLayoutResizer(sClientSideKeyName) { - const top = window.document.querySelector('.b-message-list-wrapper'), - bottom = window.document.querySelector('.b-message-view-wrapper'), + const top = doc.querySelector('.b-message-list-wrapper'), + bottom = doc.querySelector('.b-message-view-wrapper'), fDisable = bDisable => { this.setLayoutResizer(top, bottom, sClientSideKeyName, (bDisable || !$htmlCL.contains('rl-bottom-preview-pane')) ? null : 'height'); @@ -986,8 +986,8 @@ class AppUser extends AbstractApp { } initVerticalLayoutResizer(sClientSideKeyName) { - const left = window.document.getElementById('rl-left'), - right = window.document.getElementById('rl-right'), + const left = doc.getElementById('rl-left'), + right = doc.getElementById('rl-right'), fDisable = bDisable => { this.setLayoutResizer(left, right, sClientSideKeyName, bDisable ? null : 'width'); }; @@ -1114,7 +1114,13 @@ class AppUser extends AbstractApp { if (window.openpgp) { openpgpCallback(window.openpgp); } else { - jassl(openPgpJs()).then(() => { + new window.Promise((resolve, reject) => { + const script = doc.createElement('script'); + script.onload = () => resolve(); + script.onerror = () => reject(new Error(script.src)); + script.src = openPgpJs(); + doc.head.appendChild(script); + }).then(() => { if (window.openpgp) { openpgpCallback(window.openpgp); } diff --git a/dev/Common/Booter.js b/dev/Common/Booter.js index caa56564c..7264ed517 100644 --- a/dev/Common/Booter.js +++ b/dev/Common/Booter.js @@ -1,10 +1,11 @@ -import window from 'window'; +/* eslint-env browser */ -import { jassl } from 'Common/Jassl'; import { getHash, setHash, clearHash } from 'Storage/RainLoop'; let RL_APP_DATA_STORAGE = null; +const doc = window.document; + /* eslint-disable camelcase,spaced-comment */ window.__rlah_set = () => setHash(); window.__rlah_clear = () => clearHash(); @@ -14,8 +15,8 @@ window.__rlah_data = () => RL_APP_DATA_STORAGE; * @returns {void} */ function showError() { - const oR = window.document.getElementById('rl-loading'), - oL = window.document.getElementById('rl-loading-error'); + const oR = doc.getElementById('rl-loading'), + oL = doc.getElementById('rl-loading-error'); if (oR) { oR.style.display = 'none'; @@ -36,16 +37,12 @@ function showError() { */ function runMainBoot(withError) { if (window.__APP_BOOT && !withError) { - window.__APP_BOOT(() => { - showError(); - }); + window.__APP_BOOT(() => showError()); } else { showError(); } } -const doc = window.document; - function writeCSS(css) { const style = doc.createElement('style'); style.type = 'text/css'; @@ -54,6 +51,21 @@ function writeCSS(css) { doc.head.appendChild(style); } +function loadScript(src) { + if (!src) { + throw new Error('src should not be empty.'); + } + return new window.Promise((resolve, reject) => { + const script = doc.createElement('script'); + script.onload = () => resolve(); + script.onerror = () => reject(new Error(src)); + script.src = src; +// script.type = 'text/javascript'; + doc.head.appendChild(script); +// doc.body.appendChild(element); + }); +} + /** * @param {mixed} data * @returns {void} @@ -98,8 +110,7 @@ window.__initAppData = data => { ) { p.set(5); - const loadScript = jassl, - libs = () => + const libs = () => loadScript(appData.StaticLibJsLink).then(() => { doc.getElementById('rl-check').remove(); if (appData.IncludeBackground) { @@ -148,8 +159,7 @@ window.__initAppData = data => { * @returns {void} */ window.__runBoot = () => { - const doc = window.document, - app = doc.getElementById('rl-app'); + const app = doc.getElementById('rl-app'); if (!window.navigator || !window.navigator.cookieEnabled) { doc.location.replace('./?/NoCookie'); @@ -161,13 +171,11 @@ window.__runBoot = () => { if (app) { const layout = require('Html/Layout.html'), meta = doc.getElementById('app-boot-data'), - options = meta ? JSON.parse(meta.getAttribute('content')) || {} : {}, - script = doc.createElement('script'); + options = meta ? JSON.parse(meta.getAttribute('content')) || {} : {}; app.innerHTML = ((layout && layout.default ? layout.default : layout) || '').replace(/[\r\n\t]+/g, ''); - script.type = 'text/javascript'; - script.src = './?/' + loadScript('./?/' + (options.admin ? 'Admin' : '') + 'AppData@' + (options.mobile ? 'mobile' : 'no-mobile') @@ -176,7 +184,6 @@ window.__runBoot = () => { + (getHash() || '0') + '/' + window.Math.random().toString().substr(2) - + '/'; - doc.head.appendChild(script); + + '/').then(() => {}); } }; diff --git a/dev/Storage/RainLoop.js b/dev/Storage/RainLoop.js index 6b1f5245b..09dd6ca08 100644 --- a/dev/Storage/RainLoop.js +++ b/dev/Storage/RainLoop.js @@ -1,4 +1,4 @@ -import window from 'window'; +/* eslint-env browser */ const STORAGE_KEY = '__rlA'; const TIME_KEY = '__rlT';