Added a limit for loaded pages in dev

packages/next-server/server/config.ts

@@ -20,6 +20,7 @@ const defaultConfig: {[key: string]: any} = {
   onDemandEntries: {
     maxInactiveAge: 60 * 1000,
     pagesBufferLength: 2,
+    pagesBufferLimit: 8,
   },
   experimental: {
     cpus: Math.max(

packages/next/server/on-demand-entry-handler.js

@@ -33,6 +33,7 @@ export default function onDemandEntryHandler (devMiddleware, multiCompiler, {
   pageExtensions,
   maxInactiveAge,
   pagesBufferLength,
+  pagesBufferLimit,
   publicRuntimeConfig,
   serverRuntimeConfig
 }) {
@@ -249,6 +250,7 @@ export default function onDemandEntryHandler (devMiddleware, multiCompiler, {
 
         entries[normalizedPage] = { name, absolutePagePath, status: ADDED }
         doneCallbacks.once(normalizedPage, handleCallback)
+        disposeLimitedEntries(entries, lastAccessPages, pagesBufferLimit)
 
         invalidator.invalidate()
 
@@ -332,6 +334,33 @@ function disposeInactiveEntries (devMiddleware, entries, lastAccessPages, maxIna
   }
 }
 
+function disposeLimitedEntries (entries, lastAccessPages, pagesBufferLimit) {
+  const keys = Object.keys(entries)
+
+  if (keys.length <= pagesBufferLimit) return
+
+  const disposedPages = []
+  const lastActiveTime = page => entries[page].lastActiveTime || Number.MAX_SAFE_INTEGER
+  const sortedPages = keys.sort((a, b) => lastActiveTime(a) - lastActiveTime(b))
+  const removeNextEntry = () => {
+    const page = sortedPages.shift()
+
+    if (entries[page].status === BUILT) {
+      delete entries[page]
+      disposedPages.push(page)
+    }
+    if (sortedPages.length > pagesBufferLimit) {
+      removeNextEntry()
+    }
+  }
+
+  removeNextEntry()
+
+  if (disposedPages.length) {
+    Log.event(`disposing inactive page(s): ${disposedPages.join(', ')}`)
+  }
+}
+
 // /index and / is the same. So, we need to identify both pages as the same.
 // This also applies to sub pages as well.
 export function normalizePage (page) {

test/integration/ondemand/next.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   onDemandEntries: {
-    maxInactiveAge: 1000 * 5
+    maxInactiveAge: 1000 * 5,
+    pagesBufferLimit: 5
   }
 }

test/integration/ondemand/pages/multiple/about1.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about10.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about2.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about3.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about4.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about5.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about6.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about7.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about8.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/pages/multiple/about9.js

@@ -0,0 +1,9 @@
+export default () => {
+  return (
+    <div className='hmr-about-page'>
+      <p>
+        This is the about page.
+      </p>
+    </div>
+  )
+}

test/integration/ondemand/test/index.test.js

@@ -86,6 +86,34 @@ describe('On Demand Entries', () => {
     }
   })
 
+  it('should be able to load many pages and dispose old ones', async () => {
+    const pagesPath = '../.next/static/development/pages'
+    const times = async (n, fn) => {
+      let i = 0
+      while (i < n) await fn(++i)
+    }
+
+    expect.assertions(15)
+
+    // Load many pages, this should be able to scale indefinitely to any number of pages
+    await times(10, async i => {
+      const page = `/multiple/about${i}`
+      await renderViaHTTP(context.appPort, page)
+      await doPing(page)
+      const aboutPagePath = resolve(__dirname, join(pagesPath, `${page}.js`))
+
+      expect(existsSync(aboutPagePath)).toBeTruthy()
+    })
+
+    // Old Pages should have been disposed
+    await times(5, async i => {
+      const page = `/multiple/about${i}`
+      const aboutPagePath = resolve(__dirname, join(pagesPath, `${page}.js`))
+
+      expect(existsSync(aboutPagePath)).toBeFalsy()
+    })
+  })
+
   it('should navigate to pages with dynamic imports', async () => {
     let browser
     try {