web-dev-qa-db-fra.com

Qu'est-ce que "npm run build" dans create-react-app?

Je n'ai trouvé aucune explication concernant le travail de "npm run build",

C'est simple et facile à utiliser et j'obtiens le dossier "build" qui fonctionne très bien,

Mais dans create-react-app, que se passe-t-il exactement dans les coulisses?

Est-ce une utilisation complètement différente d'un outil de construction?

Si non, utilise-t-il d'autres outils de construction?

javascriptnode.jsreactjsnpmcreate-react-app
8
Ben Porat

Les développeurs divisent souvent JavaScript et CSS en fichiers séparés. Des fichiers séparés vous permettent de vous concentrer sur l'écriture de davantage de morceaux de code modulaires ne faisant qu'une seule chose. Les fichiers qui font une chose réduisent votre charge cognitive car leur maintenance est une tâche assez lourde.

Qu'est-ce qui se passe exactement derrière la scène? 

Quand il est temps de passer votre application en production, avoir plusieurs fichiers JavaScript ou CSS n’est pas idéal. Lorsqu'un utilisateur visite votre site, chacun de vos fichiers nécessite une requête HTTP supplémentaire , ce qui ralentit le chargement de votre site . Pour remédier à cela, vous pouvez créer un “build” de notre app, qui fusionne tous vos fichiers CSS en un seul et fait de même avec votre JavaScript. De cette façon, vous réduisez le nombre et la taille des fichiers que l'utilisateur reçoit. Pour créer ce "build" , vous utilisez un "outil de construction" . D'où l'utilisation de npm run build.

Comme vous l'avez dit à juste titre, l'exécution de la commande (npm run build) crée un répertoire build. Supposons maintenant que vous ayez un tas de fichiers CSS et JS dans votre application:

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

Après avoir exécuté npm run build, votre répertoire build sera:

build/
  static/
    css/
      main.css
    js/
      main.js

Maintenant, votre application contient très peu de fichiers. L'application est toujours la même mais a été compactée dans un petit paquet appelé build.

Verdict final: Vous pourriez vous demander pourquoi une construction en vaut même la peine, si elle ne fait que sauver vos utilisateurs de quelques millisecondes de temps de chargement. Eh bien, si vous créez un site uniquement pour vous-même ou quelques personnes, vous n’aurez pas à vous en préoccuper. Générer une version de votre projet n’est nécessaire que pour les sites à fort trafic (ou pour les sites dont vous espérez qu’ils seront très fréquentés prochainement).

Si vous venez tout juste d’apprendre le développement, ou si vous ne créez que des sites avec un trafic très faible, générer une construction risque de ne pas valoir votre temps.

11
patrick.1729

Il est brièvement expliqué ici: https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build .

Il combine correctement React en mode de production et optimise la construction pour obtenir les meilleures performances.

La construction est minifiée et les noms de fichiers incluent les hachages.

En coulisse, il utilise babel pour transpiler votre code et votre pack Web en tant qu'outil de compilation pour regrouper votre application.

2
rgommezz