
Par défaut Aurelia JS ne génère pas les options de compression gzip (*.gz) et brontli (*.br) des fichiers produits par Webpack.
Si ces fichiers existent sur le serveur Web ils sont envoyés à la place du fichier non compressé afin de gagner de la bande passant internet et du temps de chargement.
Bien entendu, il faut que le serveur Web ainsi que le navigateur du client, support se type de compression. Actuellement tous les navigateurs supportent le format gzip (Firefox, IE, Edge), et ceux basés sur Chrome support brontli (algorithme de compression propriété de Google).
Je vous propose donc de modifier le fichier de configuration de Webpack pour qu’il génère en mode « production » et pas en « Webpack « , ces fichiers compressés.
Configuration
Pour cela il faut avoir installer le module Webpack de compression « compression-webpack-plugin » par :
npm i compression-webpack-plugin
Puis éditer le fichier « webpack.config.js » de configuration de Webpack
Dans les modules nécessaires (début de fichier, après le dernier « require ») ajoutés :
const CompressionPlugin = require("compression-webpack-plugin");
Puis dans plugins (vers la fin du fichier) ajouté :
...when(!tests && production, new CompressionPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: /\.(js|css|html|svg)$/, minRatio: 0.8, threshold: 1024 })), ...when(!tests && production, new CompressionPlugin({ filename: "[path].br[query]", algorithm: "brotliCompress", compressionOptions: { level: 11 }, test: /\.(js|css|html|svg)$/, minRatio: 0.8, threshold: 1024 })),
Maintenant dés que vous générez un package de production :
au build --env prod
les fichiers compressés seront aussi générés.
Dans la configuration que j’ai donnée, les fichiers gzip et brontli ne sont générés que si le fichier original (mimifier) du package, est de type js, css,html, svg, qu’il fait plus de 1ko et si le ratio de compression est au mois de 0.8.
Liens utiles :
- Documentation du module de compression « compression-webpack-plugin » : https://webpack.js.org/plugins/compression-webpack-plugin/
- Documentation Webpack d’Aurelia JS : https://aurelia.io/docs/cli/webpack/