perf: using inline css & js in index.html to decrease load time (jonb…

…hanson#548) * perf: using inline css & js to decrease load time * refactor: remove unused constant variables
lux-studio-66 · May 14, 2023 · b996049 · b996049
1 parent 491a647
commit b996049
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 98 deletions.
diff --git a/lib/constants.dart b/lib/constants.dart
@@ -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';
diff --git a/lib/templates.dart b/lib/templates.dart
@@ -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:
@@ -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>
 ''';
diff --git a/lib/web.dart b/lib/web.dart
@@ -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");',
     );
   }
 
@@ -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({
@@ -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(
@@ -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,
@@ -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,