Build d’une application React

Dans l’article précédent React sans create-react-app, suite, j’ai développé une application React pour choisir des couleurs et les copier dans le presse-papier clipboard. Je vais maintenant construire build cette application pour la production, afin de pouvoir l’embarquer embed dans une page HTML existante et qu’elle soit correctement exécutée dans les navigateurs courants. Le code javascript est exécuté sur le client, on intègre le script transpilé à l’aide de la balise <script>.

Le fly geyser situé dans le Hualapai flat, au nord de Gerlach, dans le conté de Washoe au Nevada. Le Fly Geyser crache des jets d'eau en continu, ceux-ci atteignant souvent 1,5 m  de hauteur..  On trouve le texte React production en surimpression et une copie d'écran de la page.

Par défaut, Webpack inclue les styles dans le fichier javascript transpilé index-bundle.js. Alors que cela fonctionne très bien pour les versions de développement, nous ne voulons pas de cela pour la production, et préférerons des styles séparés. J’utilise le plugin Mini CSS Extract pour la production, il ralentit légèrement la construction, mais permet de disposer de deux fichiers séparés pour le javascript et pour les styles.

Pour notre application de l’article précédent, le fichier bundle javascript pour le développement fait 1, 6Mo alors que le fichier pour la production fait 276 ko.

On installe le plugin :

On crée un fichier de configuration Webpack pour la production prod.config.js :

Le fichier package.json contient les scripts suivants :

Pour lancer la transpilation pour la production, on lance

Le fichier javascript fait 354 ko et le fichier css 719 o. Cela dépasse, semble-t-il, les réglages par défaut de Webpack. La compilation prend quand même 52 s. Pour éviter de déclencher ces avertissements warnings, on peut ajouter l’entrée performance dans le fichier prod.config.js et relever la taille minimum à 512ko :

La compilation donne :

Pour intégrer cela dans une page existante, il faut embarquer les fichiers mib-colors.css et prod-bundle.js, et créer une division <div> vide avec l’identifiant root.

Et hop, des color pickers pour choisir les couleurs.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.