web-dev-qa-db-fra.com

Quand create-react-app obscurcit ou réduit le code?

J'ai une sorte de question de base sur le webpack et je pense que je peux utiliser de l'aide (autour de l'obfuscation/uglification de code).

J'utilise create-react-app pour mon application et il semble créer une version groupée pour la production (après avoir exécuté yarn build).

Et dans ce fichier, il semble que tout soit placé dans un fichier main.JS et un fichier main.CSS Etc. Je pousse ce live en utilisant "firebase deploy" (dans mon cas). Je voudrais que mon code soit uglifié et ne soit pas complètement lisible par aucun développeur.

Mais quand je vais regarder mes applications dans Chrome il ne montre pas main.JS ou tout autre fichier de paquets. Il montre juste chaque fichier individuel et exactement le code que je ' ai écrit. Une idée pourquoi cela est? Pourquoi ne montre-t-il pas le fichier combiné main.js uglifié sous l'onglet "sources" en chrome? Est-ce à voir avec la carte source?

reactjscreate-react-app
14
Kyle Pennell

Il existe un meilleur moyen de s'assurer que les cartes sources ne sont pas incluses. Créez un fichier .env dans le dossier racine de votre projet et ajoutez GENERATE_SOURCEMAP=false. Vous obtiendrez votre construction sans cartes sources.

30
Viacheslav Luschinskiy

React minimise le code pendant la génération et génère des cartes sources. JS finit par être en quelque sorte obscurci comme un sous-produit de la minification, non pas à cause du secret. De cette façon, les utilisateurs finaux peuvent charger des scripts plus rapidement que s'ils n'étaient pas minifiés, et vous (et tout le monde) pouvez naviguer dans le code d'origine lorsque vous (ou ils) ouvrez Developer Tools.

Si vous regardez dans build/static/js répertoire après la construction, il y a des paires de .js et .map des dossiers. Les fichiers JS sont chargés avec votre site Web et .map les fichiers sont chargés à la demande, lorsque les outils de développement sont ouverts.

Pour désactiver la génération de sourcemap, exécutez votre build avec GENERATE_SOURCEMAP variable d'environnement définie sur false.

GENERATE_SOURCEMAP=false npm run build

ou

GENERATE_SOURCEMAP=false yarn build

ou intégrez-le au script build dans package.json

  {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

Si vous omettez la génération de la carte source, .map les fichiers ne se retrouveront pas en production et votre code source d'origine ne sera disponible pour personne (y compris vous).

24
jokka

Il suffit de le construire avec --nomaps paramètre:

npm run build --nomaps
2
JemDzem

Essaye ça:

{
  …
  "scripts": {
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build"
  }
}

cela a fonctionné pour moi et n'a pas montré le .map fichier plus en production, mais il montre toujours chaque fichier individuel et exactement le code que nous avons écrit, plus le dossier node_modules.

peut-être que c'est une chose Firebase, parce que nous utilisons la version gratuite de Firebase ou d'autres services de déploiement gratuits comme Now, Surge, Netlify ou autre? Je ne suis pas sûr non plus.

1
Khairani F