feat!: Remove script preloading (#134)

* feat: remove mergeLinkHeaders functionality * feat: remove preload headers * feat: remove irrelevant readme info * feat: deprecate option properly * remove unused constants
netlify · May 24, 2022 · 5a0397a · 5a0397a
1 parent 4302ef2
commit 5a0397a
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 402 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,6 @@ plugins: [
       headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
       allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
       mergeSecurityHeaders: true, // boolean to turn off the default security headers
-      mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
       mergeCachingHeaders: true, // boolean to turn off the default caching headers
       transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
       generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
@@ -76,28 +75,6 @@ file hash), the plugin will transform any base file names to the hashed variants
 ensure the path is valid relative to the output `public` folder. You should be able to reference assets imported through
 javascript in the `static` folder.
 
-When `mergeLinkHeaders` is true, as it is by default, this plugin will generate HTTP preload headers for the asset paths
-for all of your application's pages.
-
-An example:
-
-```
-/my-page
-  Link: </webpack-runtime-61d3e010ac286a1ce7e1.js>; rel=preload; as=script
-  Link: </styles-89fd2ae28bdf06750a71.js>; rel=preload; as=script
-  Link: </framework-376edee25eb5f5cd8260.js>; rel=preload; as=script
-  Link: </app-9035e07a2b55474b8eee.js>; rel=preload; as=script
-  Link: </styles-89fd2ae28bdf06750a71.js>; rel=preload; as=script
-  Link: </component---src-pages-index-js-102db70fdea806a1e5b8.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/index/page-data.json>; rel=preload; as=fetch; crossorigin
-```
-
-Therefore, expect the size of the `_headers` file to grow linearly with the number of pages in your application.
-
-> **Note:** Gatsby also adds these preload tags in your pages' index.html files, whether or not you are using this
-> plugin.
-
 Do not specify the public path in the config, as the plugin will provide it for you.
 
 The Netlify `_headers` file does not inherit headers, and it will replace any matching headers it finds in more specific

diff --git a/src/__tests__/__snapshots__/build-headers-program.ts.snap b/src/__tests__/__snapshots__/build-headers-program.ts.snap
@@ -1,93 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`build-headers-program with caching headers 1`] = `
-"## Created with gatsby-plugin-netlify
-
-/*
-  X-Frame-Options: DENY
-  X-XSS-Protection: 1; mode=block
-  X-Content-Type-Options: nosniff
-  Referrer-Policy: same-origin
-/component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js
-  Cache-Control: public, max-age=31536000, immutable
-/0-0180cd94ef2497ac7db8.js
-  Cache-Control: public, max-age=31536000, immutable
-/component---src-templates-blog-post-js-517987eae96e75cddbe7.js
-  Cache-Control: public, max-age=31536000, immutable
-/component---src-pages-404-js-53e6c51a5a7e73090f50.js
-  Cache-Control: public, max-age=31536000, immutable
-/component---src-pages-index-js-0bdd01c77ee09ef0224c.js
-  Cache-Control: public, max-age=31536000, immutable
-/webpack-runtime-acaa8994f1f704475e21.js
-  Cache-Control: public, max-age=31536000, immutable
-/styles.1025963f4f2ec7abbad4.css
-  Cache-Control: public, max-age=31536000, immutable
-/styles-565f081c8374bbda155f.js
-  Cache-Control: public, max-age=31536000, immutable
-/app-f33c13590352da20930f.js
-  Cache-Control: public, max-age=31536000, immutable
-/static/*
-  Cache-Control: public, max-age=31536000, immutable
-/sw.js
-  Cache-Control: no-cache
-/offline-plugin-app-shell-fallback/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/offline-plugin-app-shell-fallback/page-data.json>; rel=preload; as=fetch; crossorigin
-/hi-folks/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hi-folks/page-data.json>; rel=preload; as=fetch; crossorigin
-/my-second-post/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/my-second-post/page-data.json>; rel=preload; as=fetch; crossorigin
-/hello-world/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hello-world/page-data.json>; rel=preload; as=fetch; crossorigin
-/404/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404/page-data.json>; rel=preload; as=fetch; crossorigin
-/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-index-js-0bdd01c77ee09ef0224c.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/index/page-data.json>; rel=preload; as=fetch; crossorigin
-/404.html
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404.html/page-data.json>; rel=preload; as=fetch; crossorigin
-"
-`;
-
 exports[`build-headers-program with manifest['pages-manifest'] 1`] = `
 "## Created with gatsby-plugin-netlify
 
@@ -120,47 +32,6 @@ exports[`build-headers-program with manifest['pages-manifest'] 1`] = `
   Cache-Control: public, max-age=31536000, immutable
 /sw.js
   Cache-Control: no-cache
-/offline-plugin-app-shell-fallback/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js>; rel=preload; as=script
-/hi-folks/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-/my-second-post/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-/hello-world/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-/404/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-index-js-0bdd01c77ee09ef0224c.js>; rel=preload; as=script
-/404.html
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
 "
 `;
 
@@ -197,61 +68,6 @@ exports[`build-headers-program with security headers 1`] = `
   Cache-Control: public, max-age=31536000, immutable
 /sw.js
   Cache-Control: no-cache
-/offline-plugin-app-shell-fallback/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/offline-plugin-app-shell-fallback/page-data.json>; rel=preload; as=fetch; crossorigin
-/hi-folks/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hi-folks/page-data.json>; rel=preload; as=fetch; crossorigin
-/my-second-post/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/my-second-post/page-data.json>; rel=preload; as=fetch; crossorigin
-/hello-world/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hello-world/page-data.json>; rel=preload; as=fetch; crossorigin
-/404/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404/page-data.json>; rel=preload; as=fetch; crossorigin
-/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-index-js-0bdd01c77ee09ef0224c.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/index/page-data.json>; rel=preload; as=fetch; crossorigin
-/404.html
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404.html/page-data.json>; rel=preload; as=fetch; crossorigin
 "
 `;
 
@@ -263,60 +79,5 @@ exports[`build-headers-program without caching headers 1`] = `
   X-XSS-Protection: 1; mode=block
   X-Content-Type-Options: nosniff
   Referrer-Policy: same-origin
-/offline-plugin-app-shell-fallback/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </component---node-modules-gatsby-plugin-offline-app-shell-js-78f9e4dea04737fa062d.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/offline-plugin-app-shell-fallback/page-data.json>; rel=preload; as=fetch; crossorigin
-/hi-folks/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hi-folks/page-data.json>; rel=preload; as=fetch; crossorigin
-/my-second-post/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/my-second-post/page-data.json>; rel=preload; as=fetch; crossorigin
-/hello-world/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-templates-blog-post-js-517987eae96e75cddbe7.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/hello-world/page-data.json>; rel=preload; as=fetch; crossorigin
-/404/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404/page-data.json>; rel=preload; as=fetch; crossorigin
-/
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-index-js-0bdd01c77ee09ef0224c.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/index/page-data.json>; rel=preload; as=fetch; crossorigin
-/404.html
-  Link: </webpack-runtime-acaa8994f1f704475e21.js>; rel=preload; as=script
-  Link: </styles-565f081c8374bbda155f.js>; rel=preload; as=script
-  Link: </app-f33c13590352da20930f.js>; rel=preload; as=script
-  Link: </0-0180cd94ef2497ac7db8.js>; rel=preload; as=script
-  Link: </component---src-pages-404-js-53e6c51a5a7e73090f50.js>; rel=preload; as=script
-  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
-  Link: </page-data/404.html/page-data.json>; rel=preload; as=fetch; crossorigin
 "
 `;
diff --git a/src/__tests__/build-headers-program.ts b/src/__tests__/build-headers-program.ts
@@ -24,25 +24,6 @@ describe(`build-headers-program`, () => {
     existsSync.mockReturnValue(true)
   })
 
-  it(`with caching headers`, async () => {
-    const pluginData = await createPluginData()
-
-    const pluginOptions = {
-      ...DEFAULT_OPTIONS,
-      mergeCachingHeaders: true,
-    }
-
-    await buildHeadersProgram(pluginData, pluginOptions, reporter)
-
-    expect(reporter.panic).not.toHaveBeenCalled()
-    const output = await readFile(pluginData.publicFolder(`_headers`), `utf8`)
-    expect(output).toMatchSnapshot()
-    expect(output).toMatch(/app-data\.json/)
-    expect(output).toMatch(/page-data\.json/)
-    // we should only check page-data & app-data once which leads to 2 times
-    expect(existsSync).toBeCalledTimes(2)
-  })
-
   it(`with manifest['pages-manifest']`, async () => {
     const pluginData = await createPluginData()
 
@@ -62,8 +43,6 @@ describe(`build-headers-program`, () => {
     const output = await readFile(pluginData.publicFolder(`_headers`), `utf8`)
     expect(output).toMatchSnapshot()
     expect(output).toMatch(/\/pages-manifest-ab11f09e0ca7ecd3b43e\.js/g)
-    expect(output).not.toMatch(/\/app-data\.json/g)
-    expect(output).not.toMatch(/\/page-data\.json/g)
     expect(output).not.toMatch(/\/undefined/g)
   })