fix: render blocking resources

daver987 · Oct 9, 2020 · 84c7f36 · 84c7f36
1 parent c6c51ad
commit 84c7f36
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/lib/module.js b/lib/module.js
@@ -84,6 +84,7 @@ module.exports = function (moduleOptions) {
     }
 
     // https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices
+    // connect to domain of font files
     if (options.preconnect) {
       this.options.head.link.push({
         rel: 'preconnect',
@@ -92,10 +93,23 @@ module.exports = function (moduleOptions) {
       })
     }
 
+    // async CSS
     this.options.head.link.push({
+      vmid: 'google-fonts',
       rel: 'stylesheet',
-      href: url
+      href: url,
+      media: 'print',
+      onload: 'this.onload=null;this.removeAttribute(\'media\');'
     })
+
+    // no-JS fallback
+    this.options.head.noscript = this.options.head.noscript || []
+    this.options.head.noscript.push({
+      innerHTML: `<link rel="stylesheet" href="${url}">`
+    })
+
+    this.options.head.__dangerouslyDisableSanitizers = this.options.head.__dangerouslyDisableSanitizers || []
+    this.options.head.__dangerouslyDisableSanitizers.push('noscript')
   })
 }
 

diff --git a/test/basic.test.js b/test/basic.test.js
@@ -15,6 +15,7 @@ describe('basic', () => {
     const html = await get('/')
     expect(html).toContain('<link data-n-head="ssr" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
     expect(html).toContain('<link data-n-head="ssr" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
-    expect(html).toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
+    expect(html).toContain('<link data-n-head="ssr" vmid="google-fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato" media="print" onload="this.onload=null;this.removeAttribute')
+    expect(html).toContain('<noscript data-n-head="ssr"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Lato"></noscript>')
   })
 })
diff --git a/test/download.test.js b/test/download.test.js
@@ -18,7 +18,8 @@ describe('download', () => {
     const html = await get('/')
     expect(html).not.toContain('<link data-n-head="ssr" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
     expect(html).not.toContain('<link data-n-head="ssr" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
-    expect(html).not.toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">')
+    expect(html).not.toContain('<link data-n-head="ssr" vmid="google-fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" media="print" onload="this.onload=null;this.removeAttribute')
+    expect(html).not.toContain('<noscript data-n-head="ssr"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto"></noscript>')
   })
 
   test('css inject', () => {