Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: using inline css & js in index.html to decrease load time #548

Merged
merged 3 commits into from
May 14, 2023
Merged

perf: using inline css & js in index.html to decrease load time #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b7b1325
perf: using inline css & js to decrease load time
OutdatedGuy May 7, 2023
25e1a40
refactor: remove unused constant variables
OutdatedGuy May 7, 2023
72809ad
Merge branch 'master' into perf/inline-scripts-and-styles
OutdatedGuy May 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions lib/constants.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,3 @@ const String _webFolder = 'web/';
const String _webSplashFolder = '${_webFolder}splash/';
const String _webSplashImagesFolder = '${_webSplashFolder}img/';
const String _webIndex = '${_webFolder}index.html';
const String _webRelativeStyleFile = 'splash/style.css';
const String _webRelativeJSFile = 'splash/splash.js';
123 changes: 63 additions & 60 deletions lib/templates.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,73 +406,74 @@ const String _iOSBrandingRightBottomConstraints = '''

/// Web related templates
const String _webCss = '''
html {
height: 100%
}
<style id="splash-screen-style">
html {
height: 100%
}

body {
margin: 0;
min-height: 100%;
background-color: [LIGHTBACKGROUNDCOLOR];
[LIGHTBACKGROUNDIMAGE]
background-size: 100% 100%;
}
body {
margin: 0;
min-height: 100%;
background-color: [LIGHTBACKGROUNDCOLOR];
[LIGHTBACKGROUNDIMAGE]
background-size: 100% 100%;
}

.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.contain {
display:block;
width:100%; height:100%;
object-fit: contain;
}
.contain {
display:block;
width:100%; height:100%;
object-fit: contain;
}

.stretch {
display:block;
width:100%; height:100%;
}
.stretch {
display:block;
width:100%; height:100%;
}

.cover {
display:block;
width:100%; height:100%;
object-fit: cover;
}
.cover {
display:block;
width:100%; height:100%;
object-fit: cover;
}

.bottom {
position: absolute;
bottom: 0;
left: 50%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.bottom {
position: absolute;
bottom: 0;
left: 50%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

.bottomLeft {
position: absolute;
bottom: 0;
left: 0;
}
.bottomLeft {
position: absolute;
bottom: 0;
left: 0;
}

.bottomRight {
position: absolute;
bottom: 0;
right: 0;
}
.bottomRight {
position: absolute;
bottom: 0;
right: 0;
}
''';

const String _webCssDark = '''

@media (prefers-color-scheme: dark) {
body {
background-color: [DARKBACKGROUNDCOLOR];
[DARKBACKGROUNDIMAGE]
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: [DARKBACKGROUNDCOLOR];
[DARKBACKGROUNDIMAGE]
}
}
''';

// XML's insertBefore can't have a newline at the end:
Expand All @@ -492,9 +493,11 @@ const String _indexHtmlBrandingPicture = '''
</picture>''';

const String _webJS = '''
function removeSplashFromWeb() {
document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent";
}
<script id="splash-screen-script">
function removeSplashFromWeb() {
document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent";
}
</script>
''';
82 changes: 46 additions & 36 deletions lib/web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ void _createSplashCss({

cssContent = cssContent.replaceFirst(
'[LIGHTBACKGROUNDIMAGE]',
'background-image: url("img/light-background.$bgExtension");',
'background-image: url("splash/img/light-background.$bgExtension");',
);
}

Expand All @@ -290,19 +290,41 @@ void _createSplashCss({

cssContent = cssContent.replaceFirst(
'[DARKBACKGROUNDIMAGE]',
'background-image: url("img/dark-background.$darkBgExtension");',
'background-image: url("splash/img/dark-background.$darkBgExtension");',
);
}

final file = File(_webFolder + _webRelativeStyleFile);
file.createSync(recursive: true);
file.writeAsStringSync(cssContent);
cssContent += ' </style>\n';

// Add css as an inline style in head tag
final webIndex = File(_webIndex);
final document = html_parser.parse(webIndex.readAsStringSync());

// Update splash css style tag
document.head
?..querySelector('style#splash-screen-style')?.remove()
..append(
html_parser.parseFragment(cssContent, container: ''),
);

// Write the updated index.html
webIndex.writeAsStringSync(document.outerHtml);
}

void _createSplashJs() {
final file = File(_webFolder + _webRelativeJSFile);
file.createSync(recursive: true);
file.writeAsStringSync(_webJS);
// Add js as an inline script in head tag
final webIndex = File(_webIndex);
final document = html_parser.parse(webIndex.readAsStringSync());

// Update splash js script tag
document.head
?..querySelector('script#splash-screen-script')?.remove()
..append(
html_parser.parseFragment(_webJS, container: ''),
);

// Write the updated index.html
webIndex.writeAsStringSync(document.outerHtml);
}

void _updateHtml({
Expand All @@ -315,16 +337,12 @@ void _updateHtml({
final webIndex = File(_webIndex);
final document = html_parser.parse(webIndex.readAsStringSync());

// Add style sheet if it doesn't exist
document.querySelector(
// Remove previously used style sheet (migrating to inline style)
document
.querySelector(
'link[rel="stylesheet"][type="text/css"][href="splash/style.css"]',
) ??
document.head?.append(
html_parser.parseFragment(
' <link rel="stylesheet" type="text/css" href="splash/style.css">\n',
container: '',
),
);
)
?.remove();

// Add meta viewport if it doesn't exist
document.querySelector(
Expand All @@ -337,31 +355,25 @@ void _updateHtml({
),
);

// Add javascript if it doesn't exist
document.querySelector(
// Remove previously used src script tag (migrating to inline script)
document
.querySelector(
'script[src="splash/splash.js"]',
) ??
document.head?.append(
html_parser.parseFragment(
' <script src="splash/splash.js"></script>\n',
container: '',
),
);
)
?.remove();

// Update splash image
document.querySelector('picture#splash')?.remove();
if (imagePath != null) {
document.body?.insertBefore(
html_parser.parseFragment(
_indexHtmlPicture
.replaceAll(
'\n${_indexHtmlPicture.replaceAll(
'[IMAGEMODE]',
imageMode,
)
.replaceAll(
).replaceAll(
'[IMAGEEXTENSION]',
imagePath.endsWith('.gif') ? 'gif' : 'png',
),
)}',
container: '',
),
document.body?.firstChild,
Expand All @@ -373,15 +385,13 @@ void _updateHtml({
if (brandingImagePath != null) {
document.body?.insertBefore(
html_parser.parseFragment(
_indexHtmlBrandingPicture
.replaceAll(
'\n${_indexHtmlBrandingPicture.replaceAll(
'[BRANDINGMODE]',
brandingMode,
)
.replaceAll(
).replaceAll(
'[BRANDINGEXTENSION]',
brandingImagePath.endsWith('.gif') ? 'gif' : 'png',
),
)}',
container: '',
),
document.body?.firstChild,
Expand Down