From 27c2188a4f82eb179769fc6e6a1012d33d160c8f Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 22 May 2023 16:35:08 +0800 Subject: [PATCH 1/5] feat(dev-server): enable gzip compression, add devServer.compress config --- .changeset/lovely-jars-roll.md | 10 ++++++++++ .../builder/builder-shared/src/schema/tools.ts | 1 + .../docs/en/config/tools/devServer.md | 17 +++++++++++++++++ .../docs/zh/config/tools/devServer.md | 17 +++++++++++++++++ packages/server/server/package.json | 6 ++++-- packages/server/server/src/constants.ts | 1 + packages/server/server/src/server/devServer.ts | 8 ++++++++ packages/toolkit/types/server/devServer.d.ts | 2 ++ pnpm-lock.yaml | 10 +++++++--- 9 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 .changeset/lovely-jars-roll.md diff --git a/.changeset/lovely-jars-roll.md b/.changeset/lovely-jars-roll.md new file mode 100644 index 000000000000..4bc42698960d --- /dev/null +++ b/.changeset/lovely-jars-roll.md @@ -0,0 +1,10 @@ +--- +'@modern-js/builder-shared': patch +'@modern-js/builder-doc': patch +'@modern-js/server': patch +'@modern-js/types': patch +--- + +feat(dev-server): enable gzip compression, add devServer.compress config + +feat(dev-server): 默认启用 gzip 压缩，新增 devServer.compress 配置项 diff --git a/packages/builder/builder-shared/src/schema/tools.ts b/packages/builder/builder-shared/src/schema/tools.ts index 95f153784dea..4b5fd47a5c82 100644 --- a/packages/builder/builder-shared/src/schema/tools.ts +++ b/packages/builder/builder-shared/src/schema/tools.ts @@ -23,6 +23,7 @@ const sharedDevServerConfigSchema = z.partialObj({ ]), }), historyApiFallback: z.union([z.boolean(), z.record(z.unknown())]), + compress: z.boolean(), hot: z.boolean(), https: DevServerHttpsOptionsSchema, liveReload: z.boolean(), diff --git a/packages/document/builder-doc/docs/en/config/tools/devServer.md b/packages/document/builder-doc/docs/en/config/tools/devServer.md index 8e3663370496..7a372e1692c5 100644 --- a/packages/document/builder-doc/docs/en/config/tools/devServer.md +++ b/packages/document/builder-doc/docs/en/config/tools/devServer.md @@ -103,6 +103,23 @@ const defaultConfig = { The config of HMR client, which are usually used to set the WebSocket URL of HMR. +#### compress + +- **Type:** `boolean` +- **Default:** `true` + +Whether to enable gzip compression for served static resources. + +If you want to disable the gzip compression, you can set `compress` to `false`: + +```ts +export default { + devServer: { + compress: false, + }, +}; +``` + #### devMiddleware - **Type:** diff --git a/packages/document/builder-doc/docs/zh/config/tools/devServer.md b/packages/document/builder-doc/docs/zh/config/tools/devServer.md index 87f343d1b90d..a6f5e9975f7b 100644 --- a/packages/document/builder-doc/docs/zh/config/tools/devServer.md +++ b/packages/document/builder-doc/docs/zh/config/tools/devServer.md @@ -103,6 +103,23 @@ const defaultConfig = { 对应 HMR 客户端的配置，通常用于设置 HMR 对应的 WebSocket URL。 +#### compress + +- **类型：** `boolean` +- **默认值：** `true` + +是否对静态资源启用 gzip 压缩。 + +如果你需要禁用 gzip 压缩，可以将 `compress` 设置为 `false`： + +```ts +export default { + devServer: { + compress: false, + }, +}; +``` + #### devMiddleware - **类型：** diff --git a/packages/server/server/package.json b/packages/server/server/package.json index c55d958c195a..b1e76fe02f3f 100644 --- a/packages/server/server/package.json +++ b/packages/server/server/package.json @@ -52,17 +52,19 @@ "@modern-js/server-utils": "workspace:*", "@modern-js/types": "workspace:*", "@modern-js/utils": "workspace:*", + "@swc/helpers": "0.5.1", + "compression": "^1.7.4", "connect-history-api-fallback": "^2.0.0", "minimatch": "^3.0.4", "path-to-regexp": "^6.2.0", - "ws": "^8.2.0", - "@swc/helpers": "0.5.1" + "ws": "^8.2.0" }, "devDependencies": { "@modern-js/server-core": "workspace:*", "@scripts/build": "workspace:*", "@scripts/jest-config": "workspace:*", "@types/connect-history-api-fallback": "^1.3.5", + "@types/compression": "^1.7.2", "@types/jest": "^29", "@types/minimatch": "^3.0.5", "@types/node": "^14", diff --git a/packages/server/server/src/constants.ts b/packages/server/server/src/constants.ts index 826fe8c97806..3fc7af48d145 100644 --- a/packages/server/server/src/constants.ts +++ b/packages/server/server/src/constants.ts @@ -16,6 +16,7 @@ export const getDefaultDevOptions = (): DevServerOptions => { devMiddleware: { writeToDisk: true }, watch: true, hot: true, + compress: true, liveReload: true, }; }; diff --git a/packages/server/server/src/server/devServer.ts b/packages/server/server/src/server/devServer.ts index 6eaad9370730..e00d33fe3008 100644 --- a/packages/server/server/src/server/devServer.ts +++ b/packages/server/server/src/server/devServer.ts @@ -130,6 +130,14 @@ export class ModernDevServer extends ModernServer { private async applyDefaultMiddlewares(app: Server) { const { pwd, dev, devMiddleware } = this; + // compression should be the first middleware + if (dev.compress) { + const { default: compression } = await import('compression'); + this.addHandler((ctx, next) => { + (compression() as RequestHandler)(ctx.req, ctx.res, next); + }); + } + this.addHandler((ctx: ModernServerContext, next: NextFunction) => { // allow hmr request cross-domain, because the user may use global proxy ctx.res.setHeader('Access-Control-Allow-Origin', '*'); diff --git a/packages/toolkit/types/server/devServer.d.ts b/packages/toolkit/types/server/devServer.d.ts index 17705babed3b..941baa4b5403 100644 --- a/packages/toolkit/types/server/devServer.d.ts +++ b/packages/toolkit/types/server/devServer.d.ts @@ -24,6 +24,8 @@ export type DevServerOptions = { host?: string; protocol?: string; }; + /** Whether to enable gzip compression */ + compress?: boolean; devMiddleware?: { writeToDisk?: boolean | ((filename: string) => boolean); outputFileSystem?: Record; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 38e031702b06..2566cf54a0bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3042,11 +3042,13 @@ importers: '@scripts/build': workspace:* '@scripts/jest-config': workspace:* '@swc/helpers': 0.5.1 + '@types/compression': ^1.7.2 '@types/connect-history-api-fallback': ^1.3.5 '@types/jest': ^29 '@types/minimatch': ^3.0.5 '@types/node': ^14 '@types/ws': ^7.4.7 + compression: ^1.7.4 connect-history-api-fallback: ^2.0.0 jest: ^29 minimatch: ^3.0.4 @@ -3066,6 +3068,8 @@ importers: '@modern-js/types': link:../../toolkit/types '@modern-js/utils': link:../../toolkit/utils '@swc/helpers': 0.5.1 + '@types/compression': 1.7.2 + compression: 1.7.4 connect-history-api-fallback: 2.0.0 minimatch: 3.1.2 path-to-regexp: 6.2.1 @@ -13815,7 +13819,7 @@ packages: resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==} dependencies: '@types/connect': 3.4.35 - '@types/node': 18.11.17 + '@types/node': 14.18.35 /@types/body-scroll-lock/3.1.0: resolution: {integrity: sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==} @@ -13867,7 +13871,7 @@ packages: /@types/connect/3.4.35: resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} dependencies: - '@types/node': 18.11.17 + '@types/node': 14.18.35 /@types/content-disposition/0.5.5: resolution: {integrity: sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==} @@ -14431,7 +14435,7 @@ packages: resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==} dependencies: '@types/mime': 1.3.2 - '@types/node': 18.11.17 + '@types/node': 14.18.35 /@types/signal-exit/3.0.1: resolution: {integrity: sha512-OSitN9PP9E/c4tlt1Qdj3CAz5uHD9Da5rhUqlaKyQRCX1T7Zdpbk6YdeZbR2eiE2ce+NMBgVnMxGqpaPSNQDUQ==} From a0821c3a6c7941d8ea981b30f3152e99a0632c2c Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 22 May 2023 16:37:26 +0800 Subject: [PATCH 2/5] chore: update --- .../document/builder-doc/docs/en/config/tools/devServer.md | 6 ++++-- .../document/builder-doc/docs/zh/config/tools/devServer.md | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/document/builder-doc/docs/en/config/tools/devServer.md b/packages/document/builder-doc/docs/en/config/tools/devServer.md index 7a372e1692c5..c5aff79c35e4 100644 --- a/packages/document/builder-doc/docs/en/config/tools/devServer.md +++ b/packages/document/builder-doc/docs/en/config/tools/devServer.md @@ -114,8 +114,10 @@ If you want to disable the gzip compression, you can set `compress` to `false`: ```ts export default { - devServer: { - compress: false, + tools: { + devServer: { + compress: false, + }, }, }; ``` diff --git a/packages/document/builder-doc/docs/zh/config/tools/devServer.md b/packages/document/builder-doc/docs/zh/config/tools/devServer.md index a6f5e9975f7b..cca7fe414b6d 100644 --- a/packages/document/builder-doc/docs/zh/config/tools/devServer.md +++ b/packages/document/builder-doc/docs/zh/config/tools/devServer.md @@ -114,8 +114,10 @@ const defaultConfig = { ```ts export default { - devServer: { - compress: false, + tools: { + devServer: { + compress: false, + }, }, }; ``` From 566b860480137edaa1b0af064540292b5cbcba5d Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 22 May 2023 16:38:47 +0800 Subject: [PATCH 3/5] chore: update lock file --- pnpm-lock.yaml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2566cf54a0bb..078da246e018 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3068,7 +3068,6 @@ importers: '@modern-js/types': link:../../toolkit/types '@modern-js/utils': link:../../toolkit/utils '@swc/helpers': 0.5.1 - '@types/compression': 1.7.2 compression: 1.7.4 connect-history-api-fallback: 2.0.0 minimatch: 3.1.2 @@ -3078,6 +3077,7 @@ importers: '@modern-js/server-core': link:../core '@scripts/build': link:../../../scripts/build '@scripts/jest-config': link:../../../scripts/jest-config + '@types/compression': 1.7.2 '@types/connect-history-api-fallback': 1.3.5 '@types/jest': 29.4.4 '@types/minimatch': 3.0.5 @@ -13860,7 +13860,6 @@ packages: resolution: {integrity: sha512-lwEL4M/uAGWngWFLSG87ZDr2kLrbuR8p7X+QZB1OQlT+qkHsCPDVFnHPyXf4Vyl4yDDorNY+mAhosxkCvppatg==} dependencies: '@types/express': 4.17.13 - dev: false /@types/connect-history-api-fallback/1.3.5: resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==} From 80d3d432d40f15a23aad3e005e563637419a7468 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 22 May 2023 17:18:52 +0800 Subject: [PATCH 4/5] chore: use http-compression to replace compression --- packages/server/server/package.json | 3 +-- packages/server/server/src/server/devServer.ts | 7 +++++-- packages/server/server/src/type.d.ts | 1 + pnpm-lock.yaml | 12 ++++++++---- 4 files changed, 15 insertions(+), 8 deletions(-) create mode 100644 packages/server/server/src/type.d.ts diff --git a/packages/server/server/package.json b/packages/server/server/package.json index b1e76fe02f3f..1525d606e1da 100644 --- a/packages/server/server/package.json +++ b/packages/server/server/package.json @@ -53,8 +53,8 @@ "@modern-js/types": "workspace:*", "@modern-js/utils": "workspace:*", "@swc/helpers": "0.5.1", - "compression": "^1.7.4", "connect-history-api-fallback": "^2.0.0", + "http-compression": "1.0.6", "minimatch": "^3.0.4", "path-to-regexp": "^6.2.0", "ws": "^8.2.0" @@ -64,7 +64,6 @@ "@scripts/build": "workspace:*", "@scripts/jest-config": "workspace:*", "@types/connect-history-api-fallback": "^1.3.5", - "@types/compression": "^1.7.2", "@types/jest": "^29", "@types/minimatch": "^3.0.5", "@types/node": "^14", diff --git a/packages/server/server/src/server/devServer.ts b/packages/server/server/src/server/devServer.ts index e00d33fe3008..7236197ed4e0 100644 --- a/packages/server/server/src/server/devServer.ts +++ b/packages/server/server/src/server/devServer.ts @@ -132,9 +132,12 @@ export class ModernDevServer extends ModernServer { // compression should be the first middleware if (dev.compress) { - const { default: compression } = await import('compression'); + const { default: compression } = await import('http-compression'); this.addHandler((ctx, next) => { - (compression() as RequestHandler)(ctx.req, ctx.res, next); + compression({ + gzip: true, + brotli: false, + })(ctx.req, ctx.res, next); }); } diff --git a/packages/server/server/src/type.d.ts b/packages/server/server/src/type.d.ts new file mode 100644 index 000000000000..54ab83653434 --- /dev/null +++ b/packages/server/server/src/type.d.ts @@ -0,0 +1 @@ +declare module 'http-compression'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 078da246e018..e5cbab1ac5b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3042,14 +3042,13 @@ importers: '@scripts/build': workspace:* '@scripts/jest-config': workspace:* '@swc/helpers': 0.5.1 - '@types/compression': ^1.7.2 '@types/connect-history-api-fallback': ^1.3.5 '@types/jest': ^29 '@types/minimatch': ^3.0.5 '@types/node': ^14 '@types/ws': ^7.4.7 - compression: ^1.7.4 connect-history-api-fallback: ^2.0.0 + http-compression: 1.0.6 jest: ^29 minimatch: ^3.0.4 node-mocks-http: ^1.11.0 @@ -3068,8 +3067,8 @@ importers: '@modern-js/types': link:../../toolkit/types '@modern-js/utils': link:../../toolkit/utils '@swc/helpers': 0.5.1 - compression: 1.7.4 connect-history-api-fallback: 2.0.0 + http-compression: 1.0.6 minimatch: 3.1.2 path-to-regexp: 6.2.1 ws: 8.8.1 @@ -3077,7 +3076,6 @@ importers: '@modern-js/server-core': link:../core '@scripts/build': link:../../../scripts/build '@scripts/jest-config': link:../../../scripts/jest-config - '@types/compression': 1.7.2 '@types/connect-history-api-fallback': 1.3.5 '@types/jest': 29.4.4 '@types/minimatch': 3.0.5 @@ -13860,6 +13858,7 @@ packages: resolution: {integrity: sha512-lwEL4M/uAGWngWFLSG87ZDr2kLrbuR8p7X+QZB1OQlT+qkHsCPDVFnHPyXf4Vyl4yDDorNY+mAhosxkCvppatg==} dependencies: '@types/express': 4.17.13 + dev: false /@types/connect-history-api-fallback/1.3.5: resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==} @@ -22160,6 +22159,11 @@ packages: /http-cache-semantics/4.1.0: resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==} + /http-compression/1.0.6: + resolution: {integrity: sha512-Yy9VFT/0fJhbpSHmqA34CJKZDXLnHoQUP2wbFXY7duOx3nc9Qf8MVJezaXTP7IirvJ9DmUv/vm7qFNu/RntdWw==} + engines: {node: '>= 4'} + dev: false + /http-deceiver/1.2.7: resolution: {integrity: sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==} From af0c497f524680ecf5d1c0c1c86bfec1a6410361 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 22 May 2023 17:34:08 +0800 Subject: [PATCH 5/5] chore: fix typing --- packages/server/server/src/server/devServer.ts | 2 ++ packages/server/server/src/type.d.ts | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) delete mode 100644 packages/server/server/src/type.d.ts diff --git a/packages/server/server/src/server/devServer.ts b/packages/server/server/src/server/devServer.ts index 7236197ed4e0..715072af7c97 100644 --- a/packages/server/server/src/server/devServer.ts +++ b/packages/server/server/src/server/devServer.ts @@ -132,6 +132,8 @@ export class ModernDevServer extends ModernServer { // compression should be the first middleware if (dev.compress) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error http-compression does not provide a type definition const { default: compression } = await import('http-compression'); this.addHandler((ctx, next) => { compression({ diff --git a/packages/server/server/src/type.d.ts b/packages/server/server/src/type.d.ts deleted file mode 100644 index 54ab83653434..000000000000 --- a/packages/server/server/src/type.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'http-compression';