Adonis: use GZIP Encoding


#1

Hello guys,

So I am using Adonis 4.1 in combination with React on the front-end for my web app.

However, the bundled version of my React file is pretty heavy and I would like to GZIP encode my asset file in order to reduce loading time on mobile phones. I created a middleware like this:

However, this gives me a browser error:

ERR_CONTENT_DECODING_FAILED

I figured the content must not actually be encoding properly but how do I fix that? The docs of zlib is somewhat poorly written and not much of a help when it comes to understanding how to use in a Node.js framework environment.


#2

Why would you serve react bundle using a custom route?

Simply put the gzip version of the bundle inside the public folder and serve it from their


#3

@virk I don’t understand what you mean by “serve a react bundle using a custom route”.

And to respond to your 2nd statement, I’m not understanding but it sounds like you are telling me to do this as if it was a one-off process.

The site would be receiving continuous updates and going out of my way to gzip my compiled js and css myself and putting them in the /public folder would mean I would have to do that for every single change to the code which doesn’t sound right. Having a middleware to automatically gzip every page and asset is much cleaner and direct.

I’m not really too sure what are you telling me here.


#4

How are you building your bundle? Surely there’s an option to define the destination, and the ability to add gzipping to the build process.

Webpack can do this, and you could always just have it be part of your production deployment process too, most likely you don’t need gzipped files in development.

gzip via middleware may be (minimally) more convenient for you, in the short term, but all it would really accomplish would be to add extra cpu overhead and latency to your response times.

If you’re not serving your react assets from the public folder, how are you serving them?

Couple years old, but some good general info here: https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a


#5

@willvincent The bundle is built using Laravel-Mix@2.1.14. Unfortunately there is no such option in that package.

Through laravel-mix we have the ability to pass in Webpack configurations but the compression-webpack-plugin which performs the gzipping during the build process is only supported for Webpack 4 and up but laravel-mix is only supported for 3.1.


#6

The 1.x.x versions of compression-webpack-plugin should work with webpack 3.x


#7

Thank you very much. I downgraded compression-webpack-plugin and was able to get it working. I did not know about the down sides of on the fly Gzipping as opposed to doing it during the build phase.

The problem I now have is to get the .gz assets loaded instead of the regular .js ones. I would really appreciate your help @willvincent for finding the adonis equivalent for this Node.js snippet:


#8

You shouldn’t gunzip your assets by yourself.
In real life situations is always better to charge it on your proxy server, like nginx.
You can use it along with app server, like Phusion Passenger.

It will be faster, easier for you and better for production.
It not so hard to set up, but if you really worried about your users experience and production environment quality, you definitely should do it.


#9

That’s a good point… a proxy server is probably a better option.

I’m running my blog (Ghost-based) behind lightify reverse proxy which basically does a bunch of pagespeed-related enhancements on the fly. Could certainly use it or similar with an adonis app.

But gzip in middleware of your app definitely isn’t a good choice :slight_smile: