Habilite la compresión de texto usando React, Webpack y Apache

Si encuentras algo que te causa duda puedes dejarnos un comentario y haremos todo lo necesario de ayudarte tan rápido como podamos.

Solución:

Respuesta corta: la solución de kushalvm no está completa. Para comprimir el tamaño de la página con gzip/brotli, hay dos pasos:

1. Crear .gz/.br archivos en tiempo de compilación (o generarlos dinámicamente por un servidor)
2. Servirlos (en lugar de .js archivos)

Y estás haciendo la primera parte pero no la segunda. Porque cuando crea un proyecto de reacción (en el caso de la representación del lado del cliente – CSR), simplemente crea uno .html archivo importando algunas etiquetas de script (su proyecto de reacción). Si usa brotli o un complemento de compresión para webpack, ha creado algunos .gz/.br archivos, pero aún así, el archivo HTML importa el viejo .js guiones.

Entonces, ¿cuáles son los diferentes métodos que puede usar para servir los archivos comprimidos que necesita para configurar su servidor (no puedes hacer esto simplemente cambiando tus configuraciones de React)

Soluciones

1) Si está utilizando la representación del lado del cliente, puede crear un servidor expreso personalizado para servir archivos, es muy simple y requiere menos de 10 líneas de código, puede leer el documento sobre esto en Official React Docs (con express-static-gzip) Entonces su archivo de servidor se verá así:

const express = require('express');
const path = require('path');
const app = express();

app.use(
  expressStaticGzip(path.join(__dirname, 'build'), 
  enableBrotli: true, // only if you have brotli files too
  ),
);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) 
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
);

app.listen(9000);

Este servidor leerá los archivos en el directorio de compilación, y si llega una solicitud de algunos activos js, verifica (si el navegador admite la compresión y si existe un archivo de compresión para él) y luego entrega los archivos comprimidos.

2) Si usa SSR (por ejemplo Next.js o React-Starter-kit) puede crear un servidor expreso personalizado y usar el mismo enfoque anterior.

3) Si usa el servidor web Apache, puede usar el archivo de configuración de compresiones Apache gzip/brotli como este:

# enable the rewrite capabilities
RewriteEngine On

# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore

# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /

# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %HTTP:Accept-encoding gzip
RewriteCond %REQUEST_FILENAME.gz -s
RewriteRule ^(.*).css $1.css.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %HTTP:Accept-encoding gzip
RewriteCond %REQUEST_FILENAME.gz -s
RewriteRule ^(.*).js $1.js.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %HTTP:Accept-encoding gzip
RewriteCond %REQUEST_FILENAME.gz -s
RewriteRule ^(.*).html $1.html.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule .css.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule .js.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule .html.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip

4) Si utiliza un proveedor de JamStack/CDN de terceros como Netlify o AWS, tienen algunas configuraciones para habilitar gzip dinámico.

Recuerda que tienes permiso de decir si topaste tu dificultad en el momento justo.

---

---

Utiliza Nuestro Buscador