Skip to content

Commit

Permalink
Enable optimized loading strategy (#26021)
Browse files Browse the repository at this point in the history
Enable optimized Loading strategy by default
  • Loading branch information
janicklas-ralph committed Jun 12, 2021
1 parent fb5418e commit 66d1d53
Show file tree
Hide file tree
Showing 9 changed files with 15 additions and 57 deletions.
5 changes: 1 addition & 4 deletions packages/next/next-server/lib/post-process.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/next/next-server/server/config-shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
3 changes: 3 additions & 0 deletions packages/next/pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
8 changes: 4 additions & 4 deletions test/integration/app-document-import-order/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
2 changes: 1 addition & 1 deletion test/integration/basic/test/dynamic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 1 addition & 5 deletions test/integration/disable-js/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
14 changes: 0 additions & 14 deletions test/integration/dynamic-routing/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions test/integration/production/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -909,7 +909,7 @@ describe('Production Usage', () => {
continue
}

if (script.attribs.defer === '' || script.attribs.async !== '') {
if (script.attribs.defer !== '' || script.attribs.async === '') {
missing = true
}
}
Expand Down
28 changes: 2 additions & 26 deletions test/integration/script-loader/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
}

Expand Down

0 comments on commit 66d1d53

Please sign in to comment.