Comment réduire les fichiers CSS et JS à l'aide d'UglifyJS et UglifyCSS

Sur les distributions basées sur RHEL, vous pouvez utiliser :

sudo dnf update
sudo dnf install nodejs npm -y

Étape 2 : Installation d'UglifyJS et d'UglifyCSS

Une fois Node.js et npm installés, vous pouvez les utiliser pour installer UglifyJS et UglifyCSS, qui sont npm packages utilisés pour réduire les fichiers JavaScript et CSS, respectivement.

sudo npm install -g uglify-js
sudo npm install -g uglifycss

Après l'installation, vérifiez si UglifyJS et UglifyCSS sont correctement installés en exécutant :

uglifyjs -V
uglifycss -V

Étape 3 : Réduire les fichiers JavaScript et CSS

Pour réduire un fichier JavaScript ou CSS, accédez au répertoire contenant le fichier que vous souhaitez réduire en exécutant :

uglifyjs yourfile.js -o yourfile.min.js
uglifycss yourfile.css > yourfile.min.css

Pour réduire plusieurs fichiers CSS et JS dans un répertoire, vous pouvez utiliser un simple script bash qui peut améliorer considérablement les performances de votre site Web en réduisant la taille des fichiers.

Réduire plusieurs fichiers JavaScript

Créez un script Bash pour réduire tous les fichiers JS.

nano minify_js.sh

Ajoutez le script suivant au fichier minify_js.sh.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifyjs "$file" -o "${file%.js}.min.js" --compress --mangle
  echo "Minified $file to ${file%.js}.min.js"
done

Rendez le script exécutable et exécutez-le.

chmod +x minify_js.sh
./minify_js.sh

Ce script parcourra tous les fichiers .js du répertoire, les réduira à l'aide de UglifyJS et créera de nouveaux fichiers avec l'extension .min.js. .

Si vous ne souhaitez pas créer de nouveaux fichiers, vous pouvez utiliser l'option -o dans le script bash pour écraser les fichiers d'origine.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifyjs "$file" --compress --mangle -o "$file"
  echo "Minified $file"
done

Réduire plusieurs fichiers CSS

De même, pour réduire tous les fichiers CSS d'un répertoire, créez un script Bash.

nano minify_css.sh

Ajoutez le script suivant au fichier minify_css.sh :

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifycss "$file" > "${file%.css}.min.css"
  echo "Minified $file to ${file%.css}.min.css"
done

Rendez le script exécutable et exécutez-le.

chmod +x minify_css.sh
./minify_css.sh

Ce script parcourra tous les fichiers .css du répertoire, les réduira à l'aide de UglifyCSS et créera de nouveaux fichiers avec l'extension .min.css. .

Si vous ne souhaitez pas créer de nouveaux fichiers, vous pouvez utiliser le script bash suivant pour écraser les fichiers d'origine.

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifycss "$file" > temp.css
  mv temp.css "$file"
  echo "Minified $file"
done

Conclusion

La réduction de vos fichiers CSS et JS est un processus simple utilisant UglifyJS et UglifyCSS sur la CLI Linux. Cela réduit non seulement la taille des fichiers, mais contribue également à améliorer les temps de chargement de vos pages Web.