perf(serve-static): performance optimization for precompressed feature (#3414)

usualoma · web-flow · commit 0edb243a7481 · 2024-09-16T13:06:34.000+09:00
* perf(serve-static): use "Set" for checking precompressed

* refactor: define COMPRESSIBLE_CONTENT_TYPE_REGEX in utils

* refactor: set "Content-Type" header only if the content is defined

* perf(serve-static): find compressed file only if the mime type is compressible
diff --git a/src/middleware/compress/index.ts b/src/middleware/compress/index.ts
@@ -4,11 +4,10 @@
  */
 
 import type { MiddlewareHandler } from '../../types'
+import { COMPRESSIBLE_CONTENT_TYPE_REGEX } from '../../utils/compress'
 
 const ENCODING_TYPES = ['gzip', 'deflate'] as const
 const cacheControlNoTransformRegExp = /(?:^|,)\s*?no-transform\s*?(?:,|$)/i
-const compressibleContentTypeRegExp =
-  /^\s*(?:text\/[^;\s]+|application\/(?:javascript|json|xml|xml-dtd|ecmascript|dart|postscript|rtf|tar|toml|vnd\.dart|vnd\.ms-fontobject|vnd\.ms-opentype|wasm|x-httpd-php|x-javascript|x-ns-proxy-autoconfig|x-sh|x-tar|x-virtualbox-hdd|x-virtualbox-ova|x-virtualbox-ovf|x-virtualbox-vbox|x-virtualbox-vdi|x-virtualbox-vhd|x-virtualbox-vmdk|x-www-form-urlencoded)|font\/(?:otf|ttf)|image\/(?:bmp|vnd\.adobe\.photoshop|vnd\.microsoft\.icon|vnd\.ms-dds|x-icon|x-ms-bmp)|message\/rfc822|model\/gltf-binary|x-shader\/x-fragment|x-shader\/x-vertex|[^;\s]+?\+(?:json|text|xml|yaml))(?:[;\s]|$)/i
 
 interface CompressionOptions {
   encoding?: (typeof ENCODING_TYPES)[number]
@@ -68,7 +67,7 @@ export const compress = (options?: CompressionOptions): MiddlewareHandler => {
 
 const shouldCompress = (res: Response) => {
   const type = res.headers.get('Content-Type')
-  return type && compressibleContentTypeRegExp.test(type)
+  return type && COMPRESSIBLE_CONTENT_TYPE_REGEX.test(type)
 }
 
 const shouldTransform = (res: Response) => {
diff --git a/src/middleware/serve-static/index.test.ts b/src/middleware/serve-static/index.test.ts
@@ -127,6 +127,25 @@ describe('Serve Static Middleware', () => {
     expect(await res.text()).toBe('Hello in static/hello.html.br')
   })
 
+  it('Should return a pre-compressed brotli response - /static/hello.unknown', async () => {
+    const app = new Hono().use(
+      '*',
+      baseServeStatic({
+        getContent,
+        precompressed: true,
+      })
+    )
+
+    const res = await app.request('/static/hello.unknown', {
+      headers: { 'Accept-Encoding': 'wompwomp, gzip, br, deflate, zstd' },
+    })
+
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Encoding')).toBe('br')
+    expect(res.headers.get('Vary')).toBe('Accept-Encoding')
+    expect(await res.text()).toBe('Hello in static/hello.unknown.br')
+  })
+
   it('Should not return a pre-compressed response - /static/not-found.txt', async () => {
     const app = new Hono().use(
       '*',
@@ -167,6 +186,26 @@ describe('Serve Static Middleware', () => {
     expect(await res.text()).toBe('Hello in static/hello.html')
   })
 
+  it('Should not find pre-compressed files - /static/hello.jpg', async () => {
+    const app = new Hono().use(
+      '*',
+      baseServeStatic({
+        getContent,
+        precompressed: true,
+      })
+    )
+
+    const res = await app.request('/static/hello.jpg', {
+      headers: { 'Accept-Encoding': 'gzip, br, deflate, zstd' },
+    })
+
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Encoding')).toBeNull()
+    expect(res.headers.get('Vary')).toBeNull()
+    expect(res.headers.get('Content-Type')).toMatch(/^image\/jpeg/)
+    expect(await res.text()).toBe('Hello in static/hello.jpg')
+  })
+
   it('Should return response object content as-is', async () => {
     const body = new ReadableStream()
     const response = new Response(body)
diff --git a/src/middleware/serve-static/index.ts b/src/middleware/serve-static/index.ts
@@ -5,6 +5,7 @@
 
 import type { Context, Data } from '../../context'
 import type { Env, MiddlewareHandler } from '../../types'
+import { COMPRESSIBLE_CONTENT_TYPE_REGEX } from '../../utils/compress'
 import { getFilePath, getFilePathWithoutDefaultDocument } from '../../utils/filepath'
 import { getMimeType } from '../../utils/mime'
 
@@ -23,6 +24,7 @@ const ENCODINGS = {
   zstd: '.zst',
   gzip: '.gz',
 } as const
+const ENCODINGS_ORDERED_KEYS = Object.keys(ENCODINGS) as (keyof typeof ENCODINGS)[]
 
 const DEFAULT_DOCUMENT = 'index.html'
 const defaultPathResolve = (path: string) => path
@@ -96,29 +98,27 @@ export const serveStatic = <E extends Env = Env>(
       return c.newResponse(content.body, content)
     }
 
-    const mimeType = options.mimes
-      ? getMimeType(path, options.mimes) ?? getMimeType(path)
-      : getMimeType(path)
+    if (content) {
+      const mimeType = options.mimes
+        ? getMimeType(path, options.mimes) ?? getMimeType(path)
+        : getMimeType(path)
 
-    if (mimeType) {
-      c.header('Content-Type', mimeType)
-    }
+      if (mimeType) {
+        c.header('Content-Type', mimeType)
+      }
 
-    if (content) {
-      if (options.precompressed) {
-        const acceptEncodings =
+      if (options.precompressed && (!mimeType || COMPRESSIBLE_CONTENT_TYPE_REGEX.test(mimeType))) {
+        const acceptEncodingSet = new Set(
           c.req
             .header('Accept-Encoding')
             ?.split(',')
             .map((encoding) => encoding.trim())
-            .filter((encoding): encoding is keyof typeof ENCODINGS =>
-              Object.hasOwn(ENCODINGS, encoding)
-            )
-            .sort(
-              (a, b) => Object.keys(ENCODINGS).indexOf(a) - Object.keys(ENCODINGS).indexOf(b)
-            ) ?? []
-
-        for (const encoding of acceptEncodings) {
+        )
+
+        for (const encoding of ENCODINGS_ORDERED_KEYS) {
+          if (!acceptEncodingSet.has(encoding)) {
+            continue
+          }
           const compressedContent = (await getContent(path + ENCODINGS[encoding], c)) as Data | null
 
           if (compressedContent) {
diff --git a/src/utils/compress.ts b/src/utils/compress.ts
@@ -0,0 +1,10 @@
+/**
+ * @module
+ * Constants for compression.
+ */
+
+/**
+ * Match for compressible content type.
+ */
+export const COMPRESSIBLE_CONTENT_TYPE_REGEX =
+  /^\s*(?:text\/[^;\s]+|application\/(?:javascript|json|xml|xml-dtd|ecmascript|dart|postscript|rtf|tar|toml|vnd\.dart|vnd\.ms-fontobject|vnd\.ms-opentype|wasm|x-httpd-php|x-javascript|x-ns-proxy-autoconfig|x-sh|x-tar|x-virtualbox-hdd|x-virtualbox-ova|x-virtualbox-ovf|x-virtualbox-vbox|x-virtualbox-vdi|x-virtualbox-vhd|x-virtualbox-vmdk|x-www-form-urlencoded)|font\/(?:otf|ttf)|image\/(?:bmp|vnd\.adobe\.photoshop|vnd\.microsoft\.icon|vnd\.ms-dds|x-icon|x-ms-bmp)|message\/rfc822|model\/gltf-binary|x-shader\/x-fragment|x-shader\/x-vertex|[^;\s]+?\+(?:json|text|xml|yaml))(?:[;\s]|$)/i
