mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Embed boot.min.js and boot.min.css into index.html for fast response
This commit is contained in:
parent
45aaa17219
commit
e1f1a3aa12
25
README.md
25
README.md
|
@ -51,6 +51,7 @@ This fork has the following changes:
|
||||||
* Removed Sentry (Application Monitoring and Error Tracking Software)
|
* Removed Sentry (Application Monitoring and Error Tracking Software)
|
||||||
* Replaced gulp-uglify with gulp-terser
|
* Replaced gulp-uglify with gulp-terser
|
||||||
* CRLF => LF line endings
|
* CRLF => LF line endings
|
||||||
|
* Embed boot.js and boot.css into index.html
|
||||||
* Ongoing removal of old JavaScript code (things are native these days)
|
* Ongoing removal of old JavaScript code (things are native these days)
|
||||||
|
|
||||||
### Removal of old JavaScript
|
### 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 |
|
|js/* |1.14.0 |native |
|
||||||
|----------- |--------: |--------: |
|
|----------- |--------: |--------: |
|
||||||
|admin.js |2.130.942 | 938.738 |
|
|admin.js |2.130.942 | 938.371 |
|
||||||
|app.js |4.184.455 |2.556.224 |
|
|app.js |4.184.455 |2.556.162 |
|
||||||
|boot.js | 671.522 | 7.265 |
|
|boot.js | 671.522 | 5.889 |
|
||||||
|libs.js | 647.614 | 312.343 |
|
|libs.js | 647.614 | 312.343 |
|
||||||
|polyfills.js | 325.834 | 0 |
|
|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 |
|
|js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli |
|
||||||
|--------------- |--------: |--------: |--------: |--------: |--------: |
|
|--------------- |--------: |--------: |--------: |--------: |--------: |
|
||||||
|admin.min.js | 252.147 | 128.761 | 73.657 | 37.546 | 32.178 |
|
|admin.min.js | 252.147 | 128.725 | 73.657 | 37.530 | 32.194 |
|
||||||
|app.min.js | 511.202 | 349.280 |140.462 | 91.746 | 73.635 |
|
|app.min.js | 511.202 | 349.257 |140.462 | 91.739 | 73.672 |
|
||||||
|boot.min.js | 66.007 | 4.258 | 22.567 | 1.946 | 1.648 |
|
|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 |
|
|libs.min.js | 572.545 | 295.754 |176.720 | 91.521 | 80.871 |
|
||||||
|polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 |
|
|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
|
### 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 |
|
|css/* |1.14.0 |native |gzip 1.14 |gzip |brotli |
|
||||||
|-------------- |-------: |-------: |------: |------: |------: |
|
|-------------- |-------: |-------: |------: |------: |------: |
|
||||||
|app.css | 340.334 | 255.729 | 46,959 | 36.948 | 31.049 |
|
|app.css | 340.334 | 252.797 | 46,959 | 36.394 | 30.615 |
|
||||||
|app.min.css | 274.791 | 208.793 | 39,618 | 32.238 | 27.339 |
|
|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
|
### PHP73 branch
|
||||||
|
|
|
@ -93,14 +93,10 @@ class AdminApp extends AbstractApp {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
bootend(bootendCallback = null) {
|
bootend() {
|
||||||
if (window.progressJs) {
|
if (window.progressJs) {
|
||||||
progressJs.end();
|
progressJs.end();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (bootendCallback) {
|
|
||||||
bootendCallback();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bootstart() {
|
bootstart() {
|
||||||
|
|
|
@ -32,7 +32,7 @@ export const ViewType = {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
export function hideLoading() {
|
export function hideLoading() {
|
||||||
qs('#rl-content').classList.add('rl-content-show');
|
qs('#rl-content').hidden = false;
|
||||||
qs('#rl-loading').remove();
|
qs('#rl-loading').remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,10 +10,6 @@ body {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
#rl-content, #rl-loading-error {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#rl-loading, #rl-loading-error {
|
#rl-loading, #rl-loading-error {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
|
|
|
@ -419,10 +419,6 @@ html.rl-ctrl-key-pressed {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rl-content-show {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.rl-mobile .hide-on-mobile {
|
html.rl-mobile .hide-on-mobile {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
67
dev/boot.js
67
dev/boot.js
|
@ -2,7 +2,7 @@
|
||||||
(win => {
|
(win => {
|
||||||
|
|
||||||
const
|
const
|
||||||
doc = win.document,
|
doc = document,
|
||||||
app = doc.getElementById('rl-app'),
|
app = doc.getElementById('rl-app'),
|
||||||
options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {},
|
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()) : ''));
|
const cookieName = encodeURIComponent(name+('session' === type ? win.name || (win.name = Date.now()) : ''));
|
||||||
|
|
||||||
// initialise if there's already data
|
// 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 ? decodeURIComponent(data[2]) : null;
|
||||||
data = data ? JSON.parse(data) : {};
|
data = data ? JSON.parse(data) : {};
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ const
|
||||||
getItem: key => data[key] === undefined ? null : data[key],
|
getItem: key => data[key] === undefined ? null : data[key],
|
||||||
setItem: function (key, value) {
|
setItem: function (key, value) {
|
||||||
data[key] = ''+value; // forces the value to a string
|
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() : '')
|
+"; expires="+('local' === type ? (new Date(Date.now()+(365*24*60*60*1000))).toGMTString() : '')
|
||||||
+"; path=/; samesite=strict";
|
+"; path=/; samesite=strict";
|
||||||
}
|
}
|
||||||
|
@ -40,17 +40,8 @@ const
|
||||||
setTimestamp = () => storage().setItem(TIME_KEY, timestamp()),
|
setTimestamp = () => storage().setItem(TIME_KEY, timestamp()),
|
||||||
|
|
||||||
showError = () => {
|
showError = () => {
|
||||||
const oR = doc.getElementById('rl-loading'),
|
doc.getElementById('rl-loading').hidden = true;
|
||||||
oL = doc.getElementById('rl-loading-error');
|
doc.getElementById('rl-loading-error').hidden = false;
|
||||||
|
|
||||||
if (oR) {
|
|
||||||
oR.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (oL) {
|
|
||||||
oL.style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
p.end();
|
p.end();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -104,11 +95,6 @@ let container = doc.querySelector('.progressjs'),
|
||||||
|
|
||||||
RL_APP_DATA_STORAGE = {};
|
RL_APP_DATA_STORAGE = {};
|
||||||
|
|
||||||
p.set(1);
|
|
||||||
|
|
||||||
Storage('local');
|
|
||||||
Storage('session');
|
|
||||||
|
|
||||||
win.rl = {
|
win.rl = {
|
||||||
hash: {
|
hash: {
|
||||||
// getHash
|
// getHash
|
||||||
|
@ -150,13 +136,10 @@ win.rl = {
|
||||||
if (RL_APP_DATA_STORAGE.Title) {
|
if (RL_APP_DATA_STORAGE.Title) {
|
||||||
title += (title ? ' - ' : '') + 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
|
* @param {mixed} appData
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
|
@ -229,22 +212,28 @@ win.__initAppData = appData => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (app) {
|
p.set(1);
|
||||||
['app-css','app-theme-link'].forEach(css => {
|
|
||||||
css = doc.getElementById(css);
|
|
||||||
css.href = css.dataset.href;
|
|
||||||
});
|
|
||||||
|
|
||||||
loadScript('./?/'
|
Storage('local');
|
||||||
+ (options.admin ? 'Admin' : '')
|
Storage('session');
|
||||||
+ 'AppData@'
|
|
||||||
+ (options.mobile ? 'mobile' : 'no-mobile')
|
// init section
|
||||||
+ (options.mobileDevice ? '-1' : '-0')
|
setInterval(setTimestamp, 60000); // 1m
|
||||||
+ '/'
|
|
||||||
+ (rl.hash.get() || '0')
|
['app-css','app-theme-link'].forEach(css => {
|
||||||
+ '/'
|
css = doc.getElementById(css);
|
||||||
+ Math.random().toString().substr(2)
|
css.href = css.dataset.href;
|
||||||
+ '/').then(() => {});
|
});
|
||||||
}
|
|
||||||
|
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);
|
})(this);
|
||||||
|
|
|
@ -234,15 +234,17 @@ class Service
|
||||||
|
|
||||||
list($sLanguage, $sTheme) = $this->oActions->GetLanguageAndTheme($bAdmin, $bMobile);
|
list($sLanguage, $sTheme) = $this->oActions->GetLanguageAndTheme($bAdmin, $bMobile);
|
||||||
|
|
||||||
$bAppJsDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_js', false);
|
$oConfig = $this->oActions->Config();
|
||||||
$bAppCssDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_css', false);
|
|
||||||
|
|
||||||
$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');
|
$sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png');
|
||||||
$sAppleTouchLink = $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(
|
$aTemplateParameters = array(
|
||||||
'{{BaseAppHeadScriptLink}}' => '',
|
'{{BaseAppHeadScriptLink}}' => '',
|
||||||
|
@ -253,11 +255,12 @@ class Service
|
||||||
'{{BaseAppThemeCssLink}}' => $this->oActions->ThemeLink($sTheme, $bAdmin),
|
'{{BaseAppThemeCssLink}}' => $this->oActions->ThemeLink($sTheme, $bAdmin),
|
||||||
'{{BaseAppPolyfillsScriptLink}}' => '',
|
'{{BaseAppPolyfillsScriptLink}}' => '',
|
||||||
'{{BaseAppBootScriptLink}}' => $this->staticPath('js/'.($bAppJsDebug ? '' : 'min/').'boot'.($bAppJsDebug ? '' : '.min').'.js'),
|
'{{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',
|
'{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2',
|
||||||
'{{BaseContentSecurityPolicy}}' => '',
|
'{{BaseContentSecurityPolicy}}' => '',
|
||||||
'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
|
'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
|
||||||
'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'),
|
'{{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')
|
'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8')
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -272,7 +275,7 @@ class Service
|
||||||
$aTemplateParameters['{{BaseHash}}'] = \md5(
|
$aTemplateParameters['{{BaseHash}}'] = \md5(
|
||||||
\implode('~', array(
|
\implode('~', array(
|
||||||
$bAdmin ? '1' : '0',
|
$bAdmin ? '1' : '0',
|
||||||
\md5($this->oActions->Config()->Get('cache', 'index', '')),
|
\md5($oConfig->Get('cache', 'index', '')),
|
||||||
$this->oActions->Plugins()->Hash(),
|
$this->oActions->Plugins()->Hash(),
|
||||||
Utils::WebVersionPath(),
|
Utils::WebVersionPath(),
|
||||||
APP_VERSION,
|
APP_VERSION,
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<title></title>
|
<title></title>
|
||||||
{{BaseAppFaviconPngLinkTag}}
|
{{BaseAppFaviconPngLinkTag}}
|
||||||
{{BaseAppFaviconTouchLinkTag}}
|
{{BaseAppFaviconTouchLinkTag}}
|
||||||
<style>{{BaseAppBootCss}}</style>
|
<style id="app-boot-css">{{BaseAppBootCss}}</style>
|
||||||
<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
|
<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
|
||||||
<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
|
<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
|
||||||
<link rel="manifest" href="{{BaseAppManifestLink}}" />
|
<link rel="manifest" href="{{BaseAppManifestLink}}" />
|
||||||
|
@ -29,8 +29,8 @@
|
||||||
<div class="e-bounce bounce3"></div>
|
<div class="e-bounce bounce3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>
|
<div id="rl-loading-error" class="thm-loading" hidden="">An error occurred.<br/>Please refresh the page and try again.</div>
|
||||||
<div id="rl-content">
|
<div id="rl-content" hidden="">
|
||||||
<div id="rl-popups"></div>
|
<div id="rl-popups"></div>
|
||||||
<div id="rl-center">
|
<div id="rl-center">
|
||||||
<div id="rl-top"></div>
|
<div id="rl-top"></div>
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="rl-check"></div>
|
<div id="rl-check"></div>
|
||||||
<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
|
<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
|
||||||
<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
|
<script type="text/javascript">{{BaseAppBootScript}}</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue