Enable optimized loading strategy (vercel#26021)

Enable optimized Loading strategy by default

Author: janicklas-ralph

packages/next/next-server/lib/post-process.ts

@@ -191,10 +191,7 @@ class ImageOptimizerMiddleware implements PostProcessMiddleware {
           acc + `<link rel="preload" href="${imgHref}" as="image"/>`,
         ''
       )
-    return result.replace(
-      /<link rel="preload"/,
-      `${imagePreloadTags}<link rel="preload"`
-    )
+    return result.replace('<meta name="next-image-preload"/>', imagePreloadTags)
   }
 }
 

packages/next/next-server/server/config-shared.ts

@@ -113,7 +113,7 @@ export const defaultConfig: NextConfig = {
     stats: false,
     externalDir: false,
     reactRoot: Number(process.env.NEXT_PRIVATE_REACT_ROOT) > 0,
-    disableOptimizedLoading: true,
+    disableOptimizedLoading: false,
     gzipSize: true,
     craCompat: false,
   },

packages/next/pages/_document.tsx

@@ -705,6 +705,9 @@ export class Head extends Component<
             {!process.env.__NEXT_OPTIMIZE_CSS && (
               <noscript data-n-css={this.props.nonce ?? ''} />
             )}
+            {process.env.__NEXT_OPTIMIZE_IMAGES && (
+              <meta name="next-image-preload" />
+            )}
             {!disableRuntimeJS &&
               !disableJsPreload &&
               this.getPreloadDynamicChunks()}

test/integration/app-document-import-order/test/index.test.js

@@ -61,11 +61,11 @@ describe('Root components import order', () => {
     const chunks = Array.from($('head').contents())
       .filter(
         (child) =>
-          child.type === 'tag' &&
-          child.name === 'link' &&
-          child.attribs.href.match(requiredByRegex)
+          child.type === 'script' &&
+          child.name === 'script' &&
+          child.attribs.src.match(requiredByRegex)
       )
-      .map((child) => child.attribs.href.match(requiredByRegex)[1])
+      .map((child) => child.attribs.src.match(requiredByRegex)[1])
 
     const requiredByAppIndex = chunks.indexOf('requiredByApp')
     const requiredByPageIndex = chunks.indexOf('requiredByPage')

test/integration/basic/test/dynamic.js

@@ -219,7 +219,7 @@ export default (context, render) => {
         const $ = await get$('/dynamic/multiple-modules')
         const html = $('html').html()
         try {
-          expect(html.match(/chunks[\\/]hello1\.js/g).length).toBe(2) // one for preload, one for the script tag
+          expect(html.match(/chunks[\\/]hello1\.js/g).length).toBe(1)
           expect(html).not.toMatch(/hello2\.js/)
         } catch (err) {
           console.error(html)

test/integration/disable-js/test/index.test.js

@@ -83,11 +83,7 @@ describe('disabled runtime JS', () => {
       const $ = cheerio.load(html)
       expect($('script#__NEXT_DATA__').length).toBe(1)
     })
-    it('should have preload links', async () => {
-      const html = await renderViaHTTP(appPort, '/')
-      const $ = cheerio.load(html)
-      expect($('link[rel=preload]').length).toBeGreaterThan(0)
-    })
+
     it('should have a script for each preload link', async () => {
       const html = await renderViaHTTP(appPort, '/')
       const $ = cheerio.load(html)

test/integration/dynamic-routing/test/index.test.js

@@ -952,20 +952,6 @@ function runTests(dev) {
     expect(res.status).toBe(400)
   })
 
-  it('should preload buildManifest for auto-export dynamic pages', async () => {
-    const html = await renderViaHTTP(appPort, '/on-mount/hello')
-    const $ = cheerio.load(html)
-    let found = 0
-
-    for (const el of Array.from($('link[rel="preload"]'))) {
-      const { href } = el.attribs
-      if (href.includes('_buildManifest')) {
-        found++
-      }
-    }
-    expect(found).toBe(1)
-  })
-
   it('should not preload buildManifest for non-auto export dynamic pages', async () => {
     const html = await renderViaHTTP(appPort, '/hello')
     const $ = cheerio.load(html)

test/integration/production/test/index.test.js

@@ -895,7 +895,7 @@ describe('Production Usage', () => {
     }
   })
 
-  it('should have async on all script tags', async () => {
+  it('should have defer on all script tags', async () => {
     const html = await renderViaHTTP(appPort, '/')
     const $ = cheerio.load(html)
     let missing = false
@@ -909,7 +909,7 @@ describe('Production Usage', () => {
         continue
       }
 
-      if (script.attribs.defer === '' || script.attribs.async !== '') {
+      if (script.attribs.defer !== '' || script.attribs.async === '') {
         missing = true
       }
     }

test/integration/script-loader/test/index.test.js

@@ -42,20 +42,14 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
-        const src = await script.getAttribute('src')
         const endScripts = await browser.elementsByCss(
           `#${id} ~ script[src^="/_next/static/"]`
         )
-        const endPreloads = await browser.elementsByCss(
-          `link[rel=preload][href="${src}"] ~ link[rel=preload][href^="/_next/static/"]`
-        )
 
         // Renders script tag
         expect(script).toBeDefined()
         // Script is inserted at the end
         expect(endScripts.length).toBe(0)
-        //Preload is defined at the end
-        expect(endPreloads.length).toBe(0)
       }
 
       // afterInteractive script in page
@@ -102,31 +96,13 @@ describe('Script Loader', () => {
 
     function test(id) {
       const script = $(`#${id}`)
-      const src = script.attr('src')
 
       // Renders script tag
-      expect(script).toBeDefined()
-      // Preload is inserted at the beginning
-      expect(
-        $(
-          `link[rel=preload][href="${src}"] ~ link[rel=preload][href^="/_next/static/"]`
-        ).length &&
-          !$(
-            `link[rel=preload][href^="/_next/static/chunks/main"] ~ link[rel=preload][href="${src}"]`
-          ).length
-      ).toBeTruthy()
-
-      // Preload is inserted after fonts and CSS
-      expect(
-        $(
-          `link[rel=stylesheet][href^="/_next/static/css"] ~ link[rel=preload][href="${src}"]`
-        ).length
-      ).toBeGreaterThan(0)
+      expect(script.length).toBe(1)
 
       // Script is inserted before NextScripts
       expect(
-        $(`#__NEXT_DATA__ ~ #${id} ~ script[src^="/_next/static/chunks/main"]`)
-          .length
+        $(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
       ).toBeGreaterThan(0)
     }