feat: preload option

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

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@
 - [Support CSS API v2](https://developers.google.com/fonts/docs/css2)
 - [Add dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch)
 - [Add preconnect](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices)
+- [Add preload](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content)
 - Download css/fonts to local project (No need external resources)
 - Encode fonts to base64
 
@@ -123,6 +124,15 @@ This option inject `<link rel="preconnect" href="https://fonts.gstatic.com/" cro
 
 See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices
 
+### `preload`
+
+- Type: `Boolean`
+- Default: `true`
+
+This option inject `<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" />` into your project header, optionally increase loading priority.
+
+See https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content
+
 ### `download`
 
 - Type: `Boolean`

diff --git a/lib/module.js b/lib/module.js
@@ -10,6 +10,7 @@ module.exports = function (moduleOptions) {
       subsets: [],
       prefetch: true,
       preconnect: true,
+      preload: true,
       download: false,
       base64: false,
       inject: true,
@@ -92,6 +93,16 @@ module.exports = function (moduleOptions) {
       })
     }
 
+    // https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content
+    // optionally increase loading priority
+    if (options.preload) {
+      this.options.head.link.push({
+        rel: 'preload',
+        as: 'style',
+        href: url
+      })
+    }
+
     this.options.head.link.push({
       rel: 'stylesheet',
       href: url

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="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
     expect(html).toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
   })
 })
diff --git a/test/download.test.js b/test/download.test.js
@@ -18,6 +18,7 @@ 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="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto">')
     expect(html).not.toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">')
   })