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)
|
||||
* 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
|
||||
|
|
|
@ -93,14 +93,10 @@ class AdminApp extends AbstractApp {
|
|||
});
|
||||
}
|
||||
|
||||
bootend(bootendCallback = null) {
|
||||
bootend() {
|
||||
if (window.progressJs) {
|
||||
progressJs.end();
|
||||
}
|
||||
|
||||
if (bootendCallback) {
|
||||
bootendCallback();
|
||||
}
|
||||
}
|
||||
|
||||
bootstart() {
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -419,10 +419,6 @@ html.rl-ctrl-key-pressed {
|
|||
}
|
||||
}
|
||||
|
||||
.rl-content-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
html.rl-mobile .hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
67
dev/boot.js
67
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);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<title></title>
|
||||
{{BaseAppFaviconPngLinkTag}}
|
||||
{{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="{{BaseAppThemeCssLink}}" id="app-theme-link" />
|
||||
<link rel="manifest" href="{{BaseAppManifestLink}}" />
|
||||
|
@ -29,8 +29,8 @@
|
|||
<div class="e-bounce bounce3"></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-content">
|
||||
<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" hidden="">
|
||||
<div id="rl-popups"></div>
|
||||
<div id="rl-center">
|
||||
<div id="rl-top"></div>
|
||||
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
<div id="rl-check"></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>
|
||||
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue