refactor!: optimize the resource hints (#1717)

Improved the data structure for defining resource hints to the browser.

_data/origin/cors.yml

@@ -1,18 +1,20 @@
-# CDNs
-
-cdns:
-  # Google Fonts
+# Resource Hints
+resource_hints:
   - url: https://fonts.googleapis.com
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
   - url: https://fonts.gstatic.com
-    args: crossorigin
-  - url: https://fonts.googleapis.com
-  # jsDelivr CDN
+    links:
+      - rel: preconnect
+        opts: [crossorigin]
+      - rel: dns-prefetch
   - url: https://cdn.jsdelivr.net
-  # polyfill.io for math (cdnjs.cloudflare.com/polyfill)
-  - url: https://cdnjs.cloudflare.com
-
-# fonts
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
 
+# Web Fonts
 webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries

_includes/head.html

@@ -59,34 +59,28 @@
 
   {% include_cached favicons.html %}
 
-  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
-
-  {% else %}
-    {% for cdn in site.data.origin[type].cdns %}
-      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
-      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
       {% endfor %}
-
-    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
-  {% endif %}
-
-  <!-- GA -->
-  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
-
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-  {% endif %}
+    {% endfor %}
+  {% endunless %}
 
   <!-- Bootstrap -->
   <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
 
-  <!-- Font Awesome -->
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+
+  <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+  <!-- 3rd-party Dependencies -->
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">

assets/js/data/swconf.js

@@ -22,20 +22,6 @@ const swconf = {
       {% endfor %}
     ],
 
-    {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
-    allowHosts: [
-      {% if site.cdn and site.cdn contains '//' %}
-        '{{ site.cdn | split: '//' | last | split: '/' | first }}',
-      {% endif %}
-
-      {%- unless site.assets.self_host.enabled -%}
-       {% for cdn in site.data.origin["cors"].cdns %}
-          '{{ cdn.url | split: "//" | last }}'
-          {%- unless forloop.last -%},{%- endunless -%}
-        {% endfor %}
-      {% endunless %}
-    ],
-
     {%- comment -%} The request url with below path will not be cached. {%- endcomment -%}
     denyPaths: [
       {% for path in site.pwa.cache.deny_paths %}

assets/js/pwa/sw.js

@@ -9,21 +9,7 @@ const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
 importScripts(swconfUrl);
 const purge = swconf.purge;
 
-function verifyHost(url) {
-  for (const host of swconf.allowHosts) {
-    const regex = RegExp(`^http(s)?://${host}/`);
-    if (regex.test(url)) {
-      return true;
-    }
-  }
-  return false;
-}
-
 function verifyUrl(url) {
-  if (!verifyHost(url)) {
-    return false;
-  }
-
   const requestPath = new URL(url).pathname;
 
   for (const path of swconf.denyPaths) {
@@ -34,10 +20,6 @@ function verifyUrl(url) {
   return true;
 }
 
-if (!purge) {
-  swconf.allowHosts.push(location.host);
-}
-
 self.addEventListener('install', (event) => {
   if (purge) {
     return;