sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.52k stars 1.91k forks source link

Response Header over 4ko #6790

Closed lhoang closed 2 years ago

lhoang commented 2 years ago

Describe the bug

In our app, the pages contain a lot of components. Since the feature #5735 that turn the preload meta links into header links, we have response headers that are over 4ko. This causes the nginx in front of the sveltekit app to throw an error upstream sent too big header while reading response header from upstream. My devops team would much prefer not to resize the header limit (1ko). Is there a way to opt out of the 5735 feature ?

You can see the current meta links here (pre-5735) : https://www.francebleu.fr/

        <link rel="stylesheet" href="/client/immutable/assets/__layout-b29003e1.css">
    <link rel="stylesheet" href="/client/immutable/assets/loadingStore-2c9c343d.css">
    <link rel="stylesheet" href="/client/immutable/assets/elections-fc4c3531.css">
    <link rel="stylesheet" href="/client/immutable/assets/Icon-45aaec8e.css">
    <link rel="stylesheet" href="/client/immutable/assets/RecordButton-13e7b126.css">
    <link rel="stylesheet" href="/client/immutable/assets/index-348e63c0.css">
    <link rel="stylesheet" href="/client/immutable/assets/_..-05fc7cad.css">
    <link rel="stylesheet" href="/client/immutable/assets/NotFound-4d9f727c.css">
    <link rel="stylesheet" href="/client/immutable/assets/Body-07ed63cd.css">
    <link rel="modulepreload" href="/client/immutable/start-c4f4d753.js">
    <link rel="modulepreload" href="/client/immutable/chunks/index-c791b446.js">
    <link rel="modulepreload" href="/client/immutable/chunks/index-a0487dfe.js">
    <link rel="modulepreload" href="/client/immutable/chunks/paths-c2c37833.js">
    <link rel="modulepreload" href="/client/immutable/chunks/singletons-bbc10d4f.js">
    <link rel="modulepreload" href="/client/immutable/pages/__layout.svelte-3a8c156d.js">
    <link rel="modulepreload" href="/client/immutable/chunks/loadingStore-be8418c9.js">
    <link rel="modulepreload" href="/client/immutable/chunks/elections.service-3d0f5cc9.js">
    <link rel="modulepreload" href="/client/immutable/chunks/Icon-c05aa5e5.js">
    <link rel="modulepreload" href="/client/immutable/chunks/RecordButton-ddcb42e0.js">
    <link rel="modulepreload" href="/client/immutable/pages/index.svelte-9d19f57a.js">
    <link rel="modulepreload" href="/client/immutable/chunks/_...path_-677e8c6a.js">
    <link rel="modulepreload" href="/client/immutable/chunks/Body-4d169bd9.js">
    <link rel="modulepreload" href="/client/immutable/chunks/NotFound-f6ce5fe3.js">

It has become in response headers :

link: <../../client/immutable/assets/_layout-ce3a37d1.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/_layout-8d3907a6.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/Link-45aaec8e.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/elections-88cb115b.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/SadSlot-3b55f977.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/displayStore-82d4fcc6.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/locales-56ce6513.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/RecordButton-13e7b126.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/component-cbb15901.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/NotFound-db4bccd5.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/Tabs-80e3ab7c.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/Visual-8be5b04c.css>; rel="preload";as="style"; nopush, <../../client/immutable/assets/ResultsWidget-af4806e6.css>; rel="preload";as="style"; nopush, <../../client/immutable/start-e4cd62ef.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/preload-helper-5e46e56e.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/index-4c7676d8.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/singletons-7ca9eee0.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/paths-0d53aa12.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/control-4c31b73e.js>; rel="modulepreload"; nopush, <../../client/immutable/components/pages/_layout.svelte-dfe8faba.js>; rel="modulepreload"; nopush, <../../client/immutable/modules/pages/_layout.ts-bf01a799.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/env-b7e5ed2a.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/_layout-cbc06e19.js>; rel="modulepreload"; nopush, <../../client/immutable/components/pages/(main)/_layout.svelte-e4b16cab.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/stores-90e52892.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/Link-0a00241d.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/elections.service-6e99aa8c.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/SadSlot-eddd826d.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/displayStore-03d93fa5.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/locales-f1106783.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/RecordButton-be968fdf.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/loadingStore-1953d492.js>; rel="modulepreload"; nopush, <../../client/immutable/components/pages/(main)/_...path_/_page.svelte-e131c90e.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/component-04d9bfcc.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/NotFound-2686cb45.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/Tabs-ee93dc7e.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/Visual-727dc380.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/ResultsWidget-0758824e.js>; rel="modulepreload"; nopush, <../../client/immutable/modules/pages/(main)/_...path_/_page.ts-98ec91d8.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/index-cce7c278.js>; rel="modulepreload"; nopush, <../../client/immutable/chunks/_page-f7cde200.js>; rel="modulepreload"; nopush

Reproduction

https://github.com/lhoang/bug-headers

I tried to add more components, but for the sake of reproducing the bug, it would have been unnecessary and irrelevant.

  1. build the app: npm run build
  2. run the app with node : node build
  3. Go on the home page and display the response headers and check the link header.

Logs

Build Logs for my real app: 

Run npm run preview to preview your production build locally.
.svelte-kit/output/client/client/immutable/assets/quote-38764dcb.svg                                             1.08 KiB
.svelte-kit/output/client/client/immutable/assets/android-app-746886f3.svg                                       22.85 KiB
.svelte-kit/output/client/client/immutable/assets/ios-app-a715bae8.svg                                           18.88 KiB
.svelte-kit/output/client/client/immutable/assets/newApplication-a2548f54.png                                    273.12 KiB
.svelte-kit/output/client/client/immutable/assets/regionalNews-d2b5f505.png                                      391.84 KiB
.svelte-kit/output/client/vite-manifest.json                                                                     18.47 KiB
.svelte-kit/output/client/client/immutable/components/pages/_layout.svelte-dfe8faba.js                           0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/client/immutable/components/pages/_error.svelte-c19cf171.js                            1.04 KiB / gzip: 0.62 KiB
.svelte-kit/output/client/client/immutable/components/pages/(embed)/embed/_...path_/_layout.svelte-99f4a7e4.js   1.12 KiB / gzip: 0.70 KiB
.svelte-kit/output/client/client/immutable/components/pages/(main)/_error.svelte-bce1f52e.js                     1.05 KiB / gzip: 0.62 KiB
.svelte-kit/output/client/client/immutable/components/pages/(embed)/embed/_...path_/_page.svelte-b809ef45.js     1.30 KiB / gzip: 0.71 KiB
.svelte-kit/output/client/client/immutable/start-3e547401.js                                                     28.13 KiB / gzip: 9.70 KiB
.svelte-kit/output/client/client/immutable/components/pages/(main)/_...path_/_page.svelte-4a99fa57.js            2.26 KiB / gzip: 1.13 KiB
.svelte-kit/output/client/client/immutable/modules/pages/_layout.ts-bf01a799.js                                  0.14 KiB / gzip: 0.13 KiB
.svelte-kit/output/client/client/immutable/modules/pages/(main)/_layout.ts-29e10d7f.js                           0.09 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/client/immutable/modules/pages/(embed)/embed/_...path_/_page.ts-613e6719.js            0.22 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/client/immutable/modules/pages/(main)/_page.ts-a40338f8.js                             0.42 KiB / gzip: 0.20 KiB
.svelte-kit/output/client/client/immutable/modules/pages/(main)/_...path_/_page.ts-85216717.js                   0.37 KiB / gzip: 0.20 KiB
.svelte-kit/output/client/client/immutable/chunks/singletons-121eb43f.js                                         1.40 KiB / gzip: 0.78 KiB
.svelte-kit/output/client/client/immutable/chunks/paths-0d53aa12.js                                              0.85 KiB / gzip: 0.52 KiB
.svelte-kit/output/client/client/immutable/chunks/preload-helper-5e46e56e.js                                     0.70 KiB / gzip: 0.43 KiB
.svelte-kit/output/client/client/immutable/chunks/control-4c31b73e.js                                            0.25 KiB / gzip: 0.17 KiB
.svelte-kit/output/client/client/immutable/chunks/_layout-cbc06e19.js                                            0.32 KiB / gzip: 0.26 KiB
.svelte-kit/output/client/client/immutable/chunks/env-b7e5ed2a.js                                                10.15 KiB / gzip: 4.33 KiB
.svelte-kit/output/client/client/immutable/chunks/index-4c7676d8.js                                              15.38 KiB / gzip: 6.33 KiB
.svelte-kit/output/client/client/immutable/chunks/environment-b44dfed6.js                                        0.03 KiB / gzip: 0.05 KiB
.svelte-kit/output/client/client/immutable/chunks/stores-2c49759a.js                                             0.61 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/client/immutable/chunks/NotFound-2686cb45.js                                           6.15 KiB / gzip: 2.59 KiB
.svelte-kit/output/client/client/immutable/chunks/Link-0a00241d.js                                               3.98 KiB / gzip: 1.99 KiB
.svelte-kit/output/client/client/immutable/chunks/displayStore-03d93fa5.js                                       16.16 KiB / gzip: 5.42 KiB
.svelte-kit/output/client/client/immutable/chunks/elections.service-6e99aa8c.js                                  22.83 KiB / gzip: 8.54 KiB
.svelte-kit/output/client/client/immutable/chunks/loadingStore-1953d492.js                                       0.07 KiB / gzip: 0.08 KiB
.svelte-kit/output/client/client/immutable/chunks/RecordButton-be968fdf.js                                       1.29 KiB / gzip: 0.76 KiB
.svelte-kit/output/client/client/immutable/chunks/_layout-0ca1df92.js                                            0.16 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/client/immutable/chunks/components-4d4dac23.js                                         5.03 KiB / gzip: 1.69 KiB
.svelte-kit/output/client/client/immutable/chunks/_page-5c083e5e.js                                              0.72 KiB / gzip: 0.47 KiB
.svelte-kit/output/client/client/immutable/chunks/index-cce7c278.js                                              0.20 KiB / gzip: 0.17 KiB
.svelte-kit/output/client/client/immutable/chunks/SadSlot-eddd826d.js                                            14.56 KiB / gzip: 6.22 KiB
.svelte-kit/output/client/client/immutable/chunks/Visual-727dc380.js                                             13.89 KiB / gzip: 5.34 KiB
.svelte-kit/output/client/client/immutable/chunks/_page-b9d3904e.js                                              1.78 KiB / gzip: 0.96 KiB
.svelte-kit/output/client/client/immutable/chunks/_page-cf15a30f.js                                              1.50 KiB / gzip: 0.81 KiB
.svelte-kit/output/client/client/immutable/chunks/0-c36e6900.js                                                  0.17 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/client/immutable/chunks/1-d9e0a0b4.js                                                  0.09 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/client/immutable/chunks/2-dad47435.js                                                  0.12 KiB / gzip: 0.12 KiB
.svelte-kit/output/client/client/immutable/chunks/3-6249512e.js                                                  0.15 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/client/immutable/chunks/4-16e75085.js                                                  0.10 KiB / gzip: 0.11 KiB
.svelte-kit/output/client/client/immutable/chunks/5-a269bbef.js                                                  0.17 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/client/immutable/chunks/6-2ec13c2b.js                                                  0.15 KiB / gzip: 0.13 KiB
.svelte-kit/output/client/client/immutable/chunks/7-08f5bd90.js                                                  0.16 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/client/immutable/chunks/index.esm-d2e231e5.js                                          14.68 KiB / gzip: 4.54 KiB
.svelte-kit/output/client/client/immutable/chunks/index-8a0a458b.js                                              10.98 KiB / gzip: 4.78 KiB
.svelte-kit/output/client/client/immutable/assets/_layout-923ba68c.css                                           0.04 KiB / gzip: 0.06 KiB
.svelte-kit/output/client/client/immutable/assets/Visual-8be5b04c.css                                            0.91 KiB / gzip: 0.39 KiB
.svelte-kit/output/client/client/immutable/assets/SadSlot-3b55f977.css                                           3.25 KiB / gzip: 0.78 KiB
.svelte-kit/output/client/client/immutable/assets/NotFound-db4bccd5.css                                          1.03 KiB / gzip: 0.38 KiB
.svelte-kit/output/client/client/immutable/assets/elections-88cb115b.css                                         6.46 KiB / gzip: 1.46 KiB
.svelte-kit/output/client/client/immutable/assets/RecordButton-13e7b126.css                                      0.09 KiB / gzip: 0.08 KiB
.svelte-kit/output/client/client/immutable/assets/displayStore-82d4fcc6.css                                      0.48 KiB / gzip: 0.21 KiB
.svelte-kit/output/client/client/immutable/assets/locales-56ce6513.css                                           0.33 KiB / gzip: 0.18 KiB
.svelte-kit/output/client/client/immutable/assets/components-510df68e.css                                        0.70 KiB / gzip: 0.25 KiB
.svelte-kit/output/client/client/immutable/assets/Link-45aaec8e.css                                              0.10 KiB / gzip: 0.09 KiB
.svelte-kit/output/client/client/immutable/assets/_layout-ce3a37d1.css                                           21.48 KiB / gzip: 3.16 KiB
.svelte-kit/output/client/client/immutable/assets/ResultsWidget-af4806e6.css                                     41.04 KiB / gzip: 5.31 KiB
.svelte-kit/output/client/client/immutable/chunks/rfplayer.esm-537f57c3.js                                       47.69 KiB / gzip: 13.41 KiB
.svelte-kit/output/client/client/immutable/assets/_page-348e63c0.css                                             9.93 KiB / gzip: 1.54 KiB
.svelte-kit/output/client/client/immutable/assets/_layout-8d3907a6.css                                           37.14 KiB / gzip: 5.57 KiB
.svelte-kit/output/client/client/immutable/assets/Tabs-80e3ab7c.css                                              59.63 KiB / gzip: 6.55 KiB
.svelte-kit/output/client/client/immutable/components/pages/(main)/_page.svelte-149e2f5c.js                      53.77 KiB / gzip: 20.08 KiB
.svelte-kit/output/client/client/immutable/chunks/locales-f3dd9987.js                                            79.04 KiB / gzip: 17.62 KiB
.svelte-kit/output/client/client/immutable/chunks/Tabs-ee93dc7e.js                                               91.44 KiB / gzip: 26.43 KiB
.svelte-kit/output/client/client/immutable/assets/component-cbb15901.css                                         106.79 KiB / gzip: 13.18 KiB
.svelte-kit/output/client/client/immutable/chunks/index-dd840dda.js                                              52.47 KiB / gzip: 18.47 KiB
.svelte-kit/output/client/client/immutable/chunks/ResultsWidget-0758824e.js                                      129.71 KiB / gzip: 34.83 KiB
.svelte-kit/output/client/client/immutable/components/pages/(main)/_layout.svelte-2a39697b.js                    248.95 KiB / gzip: 66.93 KiB
.svelte-kit/output/client/client/immutable/chunks/component-319c7472.js                                          382.74 KiB / gzip: 103.42 KiB
.svelte-kit/output/client/client/immutable/chunks/index-751ab44e.js                                              373.74 KiB / gzip: 108.97 KiB

### System Info

System:
    OS: macOS 12.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 62.34 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/Library/pnpm/node
    npm: 8.15.0 - ~/Library/pnpm/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 104.0.2
    Safari: 15.0
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.89 => 1.0.0-next.89 
    @sveltejs/kit: ^1.0.0-next.480 => 1.0.0-next.480 
    svelte: ^3.50.1 => 3.50.1 
    vite: ^3.1.0 => 3.1.0

Severity

blocking an upgrade

Additional Information

Thank you for all your work and the amazing new changes in Sveltekit

kevinrenskers commented 2 years ago

See also https://github.com/sveltejs/kit/discussions/6519

BetaConnector commented 2 years ago

Same problem here. Running the node-server behind an nginx-ingress (microk8s) with the following settings:

ingress:
  annotations:
    nginx.ingress.kubernetes.io/proxy-buffer-size: "16k"
    nginx.ingress.kubernetes.io/proxy-buffers: "16k"

Still not doing the trick.

This is currently a show-stopper.

Rich-Harris commented 2 years ago

I'm going to close this as it's very easy to fix in userland:

export function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.delete('link');
  return response;
}

It's also very easy to customise the header (for example, you could truncate it to a certain size, or omit the stylesheets, etc etc). By contrast, a config option would have to choose between simplicity (e.g. a boolean) and flexibility (size limits, filters) which would bloat the framework's surface area for very little gain.

lhoang commented 2 years ago

Thank you for your response. I should have thought of it. It does the trick.

BetaConnector commented 2 years ago

@Rich-Harris, if every big project results in this workaround, I think this should be fixed within the project and not by the user.

haikyuu commented 1 year ago

maybe creating a svelte-kit-big-project-plugin would do?

aakash14goplani commented 3 months ago

I'm going to close this as it's very easy to fix in userland:

export function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.delete('link');
  return response;
}

It's also very easy to customise the header (for example, you could truncate it to a certain size, or omit the stylesheets, etc etc). By contrast, a config option would have to choose between simplicity (e.g. a boolean) and flexibility (size limits, filters) which would bloat the framework's surface area for very little gain.

How to truncate header to a certain size?