Comment optimiser drastiquement vos apps Vue 2 en quelques minutes

Published in

Slickteam

5 min readMay 28, 2020

Chez Slickteam, nous sommes attachés à la qualité de nos développements et apportons aussi un soin particulier aux performances. L’art de minimiser la quantité de travail est essentielle, et vous verrez que l’on peut améliorer les performances de son application Vue.js très rapidement.

Mais tout d’abord pourquoi s’intéresser aux performances web ?

Google a observé que 53 % des visites de sites mobiles étaient abandonnées si une page prenait plus de 3 secondes à se charger
La BBC a constaté qu’elle perdait 10 % de visiteurs pour chaque seconde supplémentaire que prenait son site à se charger
Les moteurs de recherches prennent maintenant en compte les performances dans le classement de site
Un site optimisé c’est aussi des serveurs plus petits pour le même trafic. Ce qui permet d’alléger la facture et est également bon pour la planète.

Nous allons voir ensemble comment optimiser Stima, une application dont le client est écrit en Vue.js. Stima permet de faire du Poker Planning en présentiel ou à distance, depuis son mobile.

Pour mesurer les performances de l’application, nous allons utiliser Lighthouse, l’outil d’audit intégré à Chrome. Il y a bien sûr beaucoup d’autres outils de mesures de performances. Lighthouse en plus d’être un outil complet à l’avantage d’être local et non dépendant d’un service en ligne. Idéal pour l’intégration continue ou comme ici pour tester en local son application conteneurisée.

Nous utilisons Lighthouse en ligne de commande via le runner lighthouse-ci qui permet d’avoir un rapport HTML ou JSON, d’utiliser des seuils en deçà duquel il y aura une erreur, ou même de gérer des budgets.

npx lighthouse-ci http://localhost:8080 --report=.

Les premiers résultats sont encourageants. L’application est moderne mais surtout très simple, le score peut donc être beaucoup plus bas pour une application un peu plus complète.

Compression avec NginX et webpack

Nous avons bêtement suivi la documentation de Vue CLI pour dockeriser une application Vue.js. C’est bien mais pas suffisant, la configuration de NginX n’est pas optimisée pour la production. Commençons par configurer la compression dans le bloc httpde nginx.conf.

http {
    ...
    
    gzip            on;
    gzip_static     on;
    gzip_vary       on;
    gzip_proxied    no-cache no-store private expired auth;
    gzip_min_length 10240;
    gzip_types
    application/javascript
    application/json
    font/woff2
    text/css
    text/plain;
}

Grâce à ceci NginX va compresser à la volée les fichiers de plus de 10 Ko. En effet, ce serait contre-productif de compresser des fichiers trop petits qui mettraient plus longtemps à être traités que le gain de téléchargement. De la même façon, nous ne compressons pas les images ou fichiers zip.

Parfait. Nous y gagnons en performances, sans avoir modifié notre application !!

Mais au fait, pourquoi le faire à la volée alors qu’on pourrait le faire une bonne fois pour toute au moment du build ? C’est très aisé grâce à compression-webpack-plugin.

npm install --save-dev compression-webpack-plugin

Maintenant, modifions la configuration webpack via vue.config.js

Ajuster le cache

Les navigateurs des utilisateurs vont mettre en cache notre application selon leurs propres critères. Pour améliorer cela, nous allons expliciter la politique de cache via les headers HTTP. Nous passons également par le fichier de configuration de NginX pour cela. Mais quelle politique appliquer ?

Comme vous l’avez sans doute remarqué, Vue.js (via webpack) bundle le code, CSS et ressources en créant des fichiers au nom unique grâce à un hash. Cela va nous permettre de cacher ces fichiers sur le long terme, index.html lui ne sera pas caché. Ainsi quand une nouvelle version de notre application est disponible, index.html est systématiquement chargé et les ressources mises à jour sont de nouveaux fichiers. Si notre application reste inchangée, le navigateur chargera simplement index.html et rien d’autre, le reste restant en cache. Une seule requête de moins d’un kilo-octet !

Ci-après la configuration finale de notre NginX, avec compression et cache.

Réduire la taille de son application

Mesurer

Pour continuer à optimiser Stima, il faut réduire son poids et donc commencer par le mesurer, pour ça deux outils au choix pour analyser la composition de notre application : webpack bundle analyser ou vue ui.

Pour lancer le bundle analyser, rien de plus simple.

npm run build -- --report

Vue ui permet lui de lancer un build via une interface graphique et d’analyser notre application avec une autre visualisation. Personnellement, je trouve vue ui plus joli et lisible, mais webpack bundle analyzer à l’avantage de ne pas être spécifique à Vue.js et peut être utilisé avec d’autres frameworks comme React ou Angular.

De meilleurs imports

Nous constatons que Bootstrap prend 170 Ko, soit 40 % de l’application ! Pourtant son usage est limité au layout, mais nous importons tout le CSS.

import 'bootstrap/dist/css/bootstrap.min.css';

Nous allons donc seulement importer grid (et reboot)

import 'bootstrap/dist/css/bootstrap-reboot.min.css';
import 'bootstrap/dist/css/bootstrap-grid.min.css';

Grâce à ce changement, nous gagnons 112 Ko.

Browserslist et polyfills

Étonnamment core-js a trouvé sa place dans le bundle de notre application. core-js est utilisé par babel pour les polyfills, pourtant la partie vote de Stima cible des navigateurs récents et mobile (pas d’IE, désolé pour les utilisateurs de Windows Phone 8.1).

Le projet a beau n’être vieux de quelques mois, nous allons mettre à jour les dépendances à jour via npm update. Quant à core-js, nous allons le réinstaller pour profiter de la version 3.x et ainsi traiter le warning de dépréciation. Après un dernier build core-js et ses polyfills ont disparu, évidement le résultat sera fonction des fonctionnalités ES utilisée et des navigateurs ciblés. Les résultats peuvent varier.

Conclusion

Vous l’aurez compris nous pouvons faire des gains de performance substantiels en configurant son serveur web et son build, sans refactorer son application.

Nous sommes passés de 82 % à 99 % et de 434 Ko à 109 Ko transférés

Nous avons vu que la taille d’une application Vue.js est principalement fonction de ses dépendances, choisissez les donc avec parcimonie. Souvent il est possible d’importer que ce qui est nécessaire à l’usage d’un module. Dans le cas de Stima, on pourrait avantageusement remplacer Bootstrap par Tailwind CSS. Pourquoi pas également envisager de remplacer Axios par fetch ?

Retrouvez sur GitHub la configuration de NginX et webpack pour optimiser vos applications Vue.js https://github.com/jfgreffier/webperfs-vuejs-conf