Supports <link rel=preload> for injected config.

Author: roquie

README.md

@@ -23,7 +23,7 @@ Server created for javascript SPA apps like: Vue, React, Angular, etc.
 ## Docker usage
 
 ```Dockerfile
-FROM microparts/static-server-php:1.1.2
+FROM microparts/static-server-php:1.1.3
 
 COPY dist/ /app
 # frontend yaml configuration
@@ -176,6 +176,8 @@ window.__vcs = '%s';
 console.log('%%cSTAGE=dev SHA1=55b5293; %%cSecurity bugs: [email protected], Job/partnership: [email protected]','color:#F44336','color:#009688');
 ```
 
+Also, will be injected `<link>` tag with `rel=preload`. [More](https://developers.google.com/web/tools/lighthouse/audits/preload).
+
 3. Loads all content of static files to memory
 4. Starts the server.
 

example/README.md

@@ -13,7 +13,7 @@ ARG STAGE
 RUN npm ci --silent \
     && npm run build
 
-FROM microparts/static-server-php:1.1.2
+FROM microparts/static-server-php:1.1.3
 
 COPY --from=0 /usr/app/dist /app
 COPY --from=0 /usr/app/configuration /app/configuration

src/Modifier/InjectConfigFileToIndexModify.php

@@ -143,6 +143,8 @@ private function toTopOfHead(DOMDocument $dom, DOMElement $script, Transfer $cha
      */
     private function beforeFirstScript(DOMDocument $dom, DOMElement $script, Transfer $changed): Transfer
     {
+        $this->configPreload($dom);
+
         $scripts = $dom->getElementsByTagName('script');
 
         // If can't found any <script> tag, we will skip injecting.
@@ -159,4 +161,35 @@ private function beforeFirstScript(DOMDocument $dom, DOMElement $script, Transfe
 
         return $changed;
     }
+
+    /**
+     * Preloading __config.js
+     *
+     * https://developers.google.com/web/tools/lighthouse/audits/preload
+     *
+     * @param \DOMDocument $dom
+     *
+     * @return void
+     */
+    private function configPreload(DOMDocument $dom): void
+    {
+        $preload = $dom->createElement('link');
+        $preload->setAttribute('rel', 'preload');
+        $preload->setAttribute('href', $this->location);
+        $preload->setAttribute('as', 'script');
+
+        $link = $dom->getElementsByTagName('link');
+
+        if ($link->length > 0) {
+            $link->item(0)->parentNode->insertBefore($preload, $link->item(0));
+            return;
+        }
+
+        $head = $dom->getElementsByTagName('head');
+
+        if ($head->length > 0) {
+            $head->item(0)->appendChild($preload);
+            return;
+        }
+    }
 }

tests/Modifier/InjectConfigToIndexHandlerTest.php

@@ -27,13 +27,14 @@ public function testHowInjectingSkipFilesExceptIndex()
     public function testHowInjectingWorksWithStandardCase()
     {
         $results = $this->newInjectHandle('tests_inject_head', '/vue/index.html');
-        $this->assertInject($results);
+        $this->assertStringContainsString('/__config.js', $results->getContent());
+        $this->assertStringContainsString('preload', $results->getContent());
     }
 
     public function testHowInjectingWorksWithoutHeadSection()
     {
         $results = $this->newInjectHandle('tests_inject_head');
-        $this->assertInject($results);
+        $this->assertStringContainsString('/__config.js', $results->getContent());
     }
 
     public function testHowInjectingWorksWithInvalidValue()
@@ -46,12 +47,23 @@ public function testHowInjectingWorksWithEmptyHeadSection()
     {
         $results = $this->newInjectHandle('tests_inject_head', '/empty_index/index.html');
         $this->assertStringNotContainsString('__config', $results->getContent());
+        $this->assertStringNotContainsString('preload', $results->getContent());
     }
 
     public function testHowInjectingWorksWithoutScriptTag()
     {
         $results = $this->newInjectHandle('tests', '/empty_index/index.html');
         $this->assertStringNotContainsString('__config', $results->getContent());
+        $this->assertStringNotContainsString('preload', $results->getContent());
+    }
+
+    public function testHowInjectingPreloading()
+    {
+        $results = $this->newInjectHandle('tests', '/head_link_exists/index.html');
+        $this->assertStringContainsString('preload', $results->getContent());
+
+        $results = $this->newInjectHandle('tests', '/head_link_not_exists/index.html');
+        $this->assertStringContainsString('preload', $results->getContent());
     }
 
     /**
@@ -72,9 +84,4 @@ private function newInjectHandle(string $config, string $location = '/empty_head
 
         return $handler($transfer, $transfer);
     }
-
-    private function assertInject(Transfer $transfer)
-    {
-        $this->assertStringContainsString('/__config.js', $transfer->getContent());
-    }
 }

tests/example_dist/head_link_exists/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        name="viewport">
+  <meta content="ie=edge" http-equiv="X-UA-Compatible">
+  <title>Document</title>
+  <link rel="stylesheet" href="">
+</head>
+<body>
+hello stranger!
+<script>
+
+</script>
+</body>
+</html>

tests/example_dist/head_link_not_exists/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        name="viewport">
+  <meta content="ie=edge" http-equiv="X-UA-Compatible">
+  <title>Document</title>
+</head>
+<body>
+hello stranger!
+<script>
+
+</script>
+</body>
+</html>