2
votes

Comment compresser la compilation avec / sans éjecter create-react-app. Incluez également le fichier compressé dans la balise de script dans index.html

J'utilise react-scripts build pour préparer la production et la déployer sur le serveur AWS J'utilise

GENERATE_SOURCEMAP = false yarn build && aws s3 sync build / s3: // *********

Existe-t-il un moyen d'appliquer la compression gzip pour créer des fichiers et d'inclure des fichiers gzippés dans index.html et de les déployer sur aws afin que les fichiers gzip du navigateur soient servis.

reactjs create-react-app

2 commentaires

Normalement, je compresserais les fichiers via CloudFront. Voir: stackoverflow.com/questions/54655204/...

@CharlieHileman Je l'ai fait avec l'aide de CloudFront et cela fonctionne bien. Merci pour l'idée. Ce lien a les détails sur la façon de le faire.

4 Réponses :

1
votes

Ce n'est pas vraiment facile de changer le processus de construction de l'AR, vous pouvez l'éjecter mais vous devrez créer le vôtre après. Mais, dans votre package.json, vous pouvez définir une tâche à lancer après la construction:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "node yourNodeGzipScript.js"   }

J'espère que cela pourra vous aider.

3 commentaires

Je suis capable de compresser les fichiers mais je ne peux pas changer le nom du fichier injecté car .gz doit être inclus dans le dernier nom de fichier, par exemple en passant de ** .chunks.js à ** chunks.js.gz

Avez-vous essayé d'utiliser les méthodes "renommer" ou "copier" du package "fs"?

Oui, j'ai fait ça, j'ai créé un fichier .js et j'utilise «fs» pour mettre à jour les balises script et css. Et cela a fonctionné .. Merci mon pote.

1
votes

Vous pouvez également simplement ajouter un script postbuild dans votre package.json avec:

"postbuild": "find ./build -type f -name '*.css' -o -name '*.js' -exec gzip -k '{}' \\;"

0 commentaires

8
votes

Installez le package gzipper ( https://www.npmjs.com/package/gzipper ) . Modifiez la commande de construction comme ceci

server {
        # Gzip Settings
        gzip on;
        gzip_static on; # allows pre-serving of .gz file if it exists 
        gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
        gzip_proxied any; # enable gzip for all proxied requests
        gzip_buffers 16 8k; # number and size of buffers to compress a response
        gzip_http_version 1.1;
        gzip_min_length 256; # Only gzip files of size in bytes
        gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
        gunzip on; # Uncompress on the fly
        listen       4000;
        server_name  localhost;



        location / {
            root   html/react-app;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


    }

et construisez votre projet, vous obtiendrez à la fois gzip et le fichier normal. C'est à vous de faire en sorte que le serveur serve gzip au lieu d'un fichier normal. Si vous utilisez nginx, vous devez configurer votre serveur dans le fichier nginx.conf comme ci-dessous

"build": "react-scripts build && gzipper --verbose ./build"

2 commentaires

J'ai résolu le problème depuis le cloud. mais merci pour la solution. :)

cela devrait être la réponse acceptée. Le plus détaillé et le plus utile à coup sûr

1
votes

J'ai utilisé cette commande pour gzip les fichiers en les gardant sous le même nom

- yarn global add gzipper
- gzipper compress ./build ./gzip_build --output-file-format [filename].[ext] --verbose

FYI: gzipper --verbose m'a obtenu une erreur. "Compresser" manqué.

0 commentaires