test: add test for modern bundle size (#6302)

package.json

@@ -37,7 +37,6 @@
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "cheerio": "^1.0.0-rc.3",
     "codecov": "^3.5.0",
     "consola": "^2.10.1",
     "cross-spawn": "^6.0.5",

test/fixtures/async-config/nuxt.config.js

@@ -7,7 +7,8 @@ const createData = async () => {
     },
     head: {
       title: 'Async Config!'
-    }
+    },
+    modern: 'server'
   }
 }
 

test/unit/async-config.size-limit.test.js

@@ -1,41 +1,67 @@
-import cheerio from 'cheerio'
-import fetch from 'node-fetch'
-import { getPort, loadFixture, Nuxt } from '../utils'
-
-let port
-let nuxt = null
-const url = route => 'http://localhost:' + port + route
-let responseSizes
-
-describe('size-limit test', () => {
-  beforeAll(async () => {
-    const options = await loadFixture('async-config')
-    nuxt = new Nuxt(options)
-    await nuxt.ready()
-
-    port = await getPort()
-    await nuxt.server.listen(port, '0.0.0.0')
-
-    const { html } = await nuxt.server.renderRoute('/')
-    // Get all script URLs from the HTML
-    const $ = cheerio.load(html)
-    const scriptsUrls = $('script[src]')
-      .map((_, el) => $(el).attr('src'))
-      .get()
-      .map(url)
-    const resourceUrls = [url('/'), ...scriptsUrls]
-
-    // Fetch all resources and get their size (bytes)
-    responseSizes = await Promise.all(resourceUrls.map(async (url) => {
-      const response = await fetch(url).then(res => res.text())
-      return response.length
-    }))
+
+import { resolve } from 'path'
+import zlib from 'zlib'
+import fs from 'fs-extra'
+import pify from 'pify'
+
+const gzip = pify(zlib.gzip)
+const brotli = pify(zlib.brotliCompress)
+const compressSize = (input, compressor) => compressor(input).then(data => data.length)
+
+const distDir = resolve(__dirname, '../fixtures/async-config/.nuxt/dist')
+
+const getResourcesSize = async (mode) => {
+  const { all } = await import(resolve(distDir, 'server', `${mode}.manifest.json`))
+  const resources = all.filter(filename => filename.endsWith('.js'))
+  const sizes = { uncompressed: 0, gzip: 0, brotli: 0 }
+  for (const resource of resources) {
+    const file = resolve(distDir, 'client', resource)
+    const stat = await fs.stat(file)
+    sizes.uncompressed += stat.size / 1024
+    const fileContent = await fs.readFile(file)
+    sizes.gzip += await compressSize(fileContent, gzip) / 1024
+    sizes.brotli += await compressSize(fileContent, brotli) / 1024
+  }
+  return sizes
+}
+
+describe('nuxt basic resources size limit', () => {
+  expect.extend({
+    toBeWithinSize (received, size) {
+      const maxSize = size * 1.05
+      const minSize = size * 0.95
+      const pass = received >= minSize && received <= maxSize
+      return {
+        pass,
+        message: () =>
+          `expected ${received} to be within range ${minSize} - ${maxSize}`
+      }
+    }
   })
 
-  it('should stay within the size boundaries', () => {
-    const responseSizeBytes = responseSizes.reduce((bytes, responseLength) => bytes + responseLength, 0)
-    const responseSizeKilobytes = Math.ceil(responseSizeBytes / 1024)
-    // Without gzip!
-    expect(responseSizeKilobytes).toBeLessThanOrEqual(196)
+  it('should stay within the size limit range in legacy mode', async () => {
+    const legacyResourcesSize = await getResourcesSize('client')
+
+    const LEGACY_JS_RESOURCES_KB_SIZE = 194
+    expect(legacyResourcesSize.uncompressed).toBeWithinSize(LEGACY_JS_RESOURCES_KB_SIZE)
+
+    const LEGACY_JS_RESOURCES_GZIP_KB_SIZE = 66
+    expect(legacyResourcesSize.gzip).toBeWithinSize(LEGACY_JS_RESOURCES_GZIP_KB_SIZE)
+
+    const LEGACY_JS_RESOURCES_BROTLI_KB_SIZE = 58
+    expect(legacyResourcesSize.brotli).toBeWithinSize(LEGACY_JS_RESOURCES_BROTLI_KB_SIZE)
+  })
+
+  it('should stay within the size limit range in modern mode', async () => {
+    const modernResourcesSize = await getResourcesSize('modern')
+
+    const MODERN_JS_RESOURCES_KB_SIZE = 172
+    expect(modernResourcesSize.uncompressed).toBeWithinSize(MODERN_JS_RESOURCES_KB_SIZE)
+
+    const MODERN_JS_RESOURCES_GZIP_KB_SIZE = 59
+    expect(modernResourcesSize.gzip).toBeWithinSize(MODERN_JS_RESOURCES_GZIP_KB_SIZE)
+
+    const MODERN_JS_RESOURCES_BROTLI_KB_SIZE = 52
+    expect(modernResourcesSize.brotli).toBeWithinSize(MODERN_JS_RESOURCES_BROTLI_KB_SIZE)
   })
 })

yarn.lock

@@ -3125,7 +3125,7 @@ check-types@^8.0.3:
   resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
-cheerio@^1.0.0-rc.2, cheerio@^1.0.0-rc.3:
+cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.3"
   resolved "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
   integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==