From 0edb243a7481a395f017625ba7493e1b6271decb Mon Sep 17 00:00:00 2001 From: Taku Amano Date: Mon, 16 Sep 2024 13:06:34 +0900 Subject: [PATCH] perf(serve-static): performance optimization for precompressed feature (#3414) * 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 --- src/middleware/compress/index.ts | 5 ++- src/middleware/serve-static/index.test.ts | 39 +++++++++++++++++++++++ src/middleware/serve-static/index.ts | 34 ++++++++++---------- src/utils/compress.ts | 10 ++++++ 4 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 src/utils/compress.ts diff --git a/src/middleware/compress/index.ts b/src/middleware/compress/index.ts index f77e1d8e..194aeaff 100644 --- 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 index b0bd1e3e..585008ca 100644 --- 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 index 56c601da..6c45d61a 100644 --- 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 = ( return c.newResponse(content.body, content) } - const mimeType = options.mimes - ? getMimeType(path, options.mimes) ?? getMimeType(path) - : getMimeType(path) - - if (mimeType) { - c.header('Content-Type', mimeType) - } - if (content) { - if (options.precompressed) { - const acceptEncodings = + const mimeType = options.mimes + ? getMimeType(path, options.mimes) ?? getMimeType(path) + : getMimeType(path) + + if (mimeType) { + c.header('Content-Type', mimeType) + } + + 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 new file mode 100644 index 00000000..a0a6cd7b --- /dev/null +++ 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