How to use compression-webpack-plugin with React Native Web/Expo/Nginx

Question

I have a React Native Web site built with Expo and using Nginx in a docker container.

I just tried to add compression-webpack-plugin, and my current webpack.config.js looks like this:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.

  config.resolve.alias["react-native-sound"] = "react-native-web-sound";

  config.plugins = [new CompressionPlugin()];

  return config;
};

This generates a bunch of gzipped build files - great, that's the intention.

However this doesn't work with my nginx config. I intend to enable gzip in nginx - will that work sufficiently to allow nginx to launch my site?

Here's my nginx config:

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  '$status $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  
  keepalive_timeout  65;
server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}
}

I was going to add gzip configuration, like this:

gzip on;
gzip_static on;    
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied  any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;  

But I suspect that this alone will not be enough to allow my site to launch correctly.

My generated build from Expo with the plugin has a few directories:

fonts
static
static/js
static/media

I strongly suspect that I will need to point nginx to one of the files in the JS directory.

Probably app.8b24bc88.chunk.js.gz or runtime~app.d9840d63.js.gz

Does anyone have any additional information here? Either how to modify my nginx conf to point correctly to my built file, or what I am doing wrong with the zipping process?

Answer 1

The NGINX software compresses data from the server before it is sent to the browser to be decompressed. It sounds like what you are doing is trying to compress data without NGINX's help but you are trying to configure NGINX to compress anyway.

From the NGINX documentation:

NGINX performs compression before sending responses to clients, but does not “double compress” responses that are already compressed (for example, by a proxied server).

Compressing with React Native might give you different options or more power than using NGINX's compression methods because NGINX merely signals to browsers to decompress. With a custom site you could write the code both compression and decompression to your specifications.

If you want to handle all the compression and decompression with the React Native Web software, then you could create a bare index.html file that contains a script that will download and decompress all your files before running your web application.

Source: https://docs.nginx.com/nginx/admin-guide/web-server/compression/