Add gzip support?

[Telokis]

I noticed in #11 that you added gzip support two years ago.
However, I tried reading the source code and I find nothing related to compression.
When using serve -s build for my react application, there is no compression occuring and I receive the file as-is. I have .js.gz files along my .js files so I expected serve to use those but it doesn't happen.

Why was that feature removed? Would it be possible to put it back?

[jamo]

gzip, brotli, etc., compressions should really be taken care by the reverse-proxy that also terminates ssl.

Having support for the .js.gz could possibly be something we could look into cc/ @leo

[Telokis]

Yes, the .js.gz is what I'm the most interested in!
Thanks for keeping me in touch.

[gaearon]

When we added Serve to Create React App's default suggestion after the build, we assumed it will keep its behavior of gzipping assets by default. Otherwise it creates a confusing impression that React is 100 KB already gzipped (since we suggest to test the "production build" with Serve).

[mlyknown]

@gaearon This is a good's suggestion. And It's is better that make response status code is 304, now every response status is always 200.

[MichaelDimmitt]

New to gzipp-ing but I think I am seeing the same issue:

Visual example, (gzipped the file circled is 37 KB)
When i run serve -s build for localhost on mac.

https://webmasters.stackexchange.com/questions/4607/is-there-an-easy-way-to-see-amount-of-compression-in-chrome

If I g-zip the files manually it will return a 404.
react-scripts build && rm build/static/*/*.map && ls build/static/* && gzip -r build && serve -s build

Hopefully, I am commenting in the correct location. Happy to move the comment elsewhere.
Is the fix for this on a roadmap?

I was able to have the compression after manually compressing and using express-static-gzip
https://github.com/tkoenig89/express-static-gzip,
Posting because maybe it will help in resolving the issue. It will be nice to use this package instead because it comes built in to the toolset that I am using.

Happy to provide an example or additional info.

[ketysek]

It's not a proper server for production without supporting gzip :-(

[r0mflip]

Serving gzip-ed files require making extra filesystem calls. My thoughts are probably it can be implemented through the middleware createReadStream.

here we only need a stream. Something hacky like this would work.

createReadStream = async (absolutePath, config) => {
  if (config.start || config.end) {
    // probably don't handle range requests
    return fs.createReadStream(absolutePath, config);
  }

  try {
    // stat gz and br files
    const stats = await fs.stat(`${absolutePath}.gz`);
    if (stats) {
      return fs.createReadStream(`${absolutePath}.gz`);
    } else {
      throw new Error('Stat fail');
    }
  } catch (err) {
    return fs.createReadStream(absolutePath, config);
  }
}

And we can't just ignore this

@jamo: gzip, brotli, etc., compressions should really be taken care by the reverse-proxy that also terminates ssl.

[leo]

Added in #487.

[MichaelDimmitt]

Thanks @leo,
Serve is now gzipping the files for me. Current latest version: [email protected]

[lmf-git]

Why was this closed?

[MichaelDimmitt]

What steps are needed to reproduce? @lmf-git

When I checked this morning, I was at first shocked, then I realized that I had chrome extensions turned on that were making some of the network requests. When I switched to incognito mode. Everything was gzipped.

My example uses vanilla create react app since it is quick to spin up. Running the build and then serving the build locally using serve.

[salazarm]

I have this statically exported app on vercel https://modern-dbt-docs-omega.vercel.app/source/source.gitlab_snowflake.zoominfo.global and you can see in the network panel the /treedata is not being gzipped. I assume this is using serve under the hood. Locally I get the same behavior.

[mnpenner]

What steps are needed to reproduce? @lmf-git

When I checked this morning, I was at first shocked, then I realized that I had chrome extensions turned on that were making some of the network requests. When I switched to incognito mode. Everything was gzipped.

My example uses vanilla create react app since it is quick to spin up. Running the build and then serving the build locally using serve.

Accept-Encoding Request Header != Content-Encoding response. That just means your browser accepts gzip. Your screenshots don't really show us anything. The size is small because it's 304 Not Modified.

[ngduc]

I'm getting the same issue with gzip. I'm using NextJS, deployed to vercel, used Pingdom to test the output site:

[roeeklinger]

I am also having the same issue on Pingdom with Vercel and NextJS