disminuir el zoom CSS y javascript (js), puede utilizar dos herramientas populares: UglifyJS para javascript y CSS feo para CSS.
La minificación es un proceso que le ayuda a reducir el tamaño de un archivo eliminando caracteres innecesarios como espacios, tabulaciones, nuevas líneas y comentarios del código fuente sin cambiar su funcionalidad y puede acortar el tiempo de carga de la aplicación en la web.
Este artículo lo guiará a través del proceso de reducción. CSS y js documento Uso de la interfaz de línea de comandos (CLI) de Linux UglifyJS y CSS feo herramienta.
Tabla de Contenidos
Paso 1: instale Node.js y NPM en Linux
Antes de comenzar, asegúrese de tener Nodo.js y Nueva gestión de proyectos. (administrador de paquetes de nodo) instalado en su sistema Linux.
node -v npm -v
Si no están instalados, puede instalarlos en distribuciones basadas en Debian usando los siguientes comandos.
sudo apt update sudo apt install nodejs npm -y
En distribuciones basadas en RHEL, puede utilizar:
sudo dnf update sudo dnf install nodejs npm -y
Paso 2: Instale UglifyJS y UglifyCSS
una vez Nodo.js y Nueva gestión de proyectos. ya instalados, puedes usarlos para instalar UglifyJS y CSS feoque son paquetes npm para minimizar archivos JavaScript y CSS respectivamente.
sudo npm install -g uglify-js sudo npm install -g uglifycss
Después de la instalación compruebe si UglifyJS y CSS feo Instálelo correctamente ejecutando el siguiente comando:
uglifyjs -V uglifycss -V
Paso 3: Minimizar archivos JavaScript y CSS
Para minimizar un archivo JavaScript o CSS, navegue hasta el directorio que contiene el archivo que desea minimizar ejecutando el siguiente comando:
uglifyjs yourfile.js -o yourfile.min.js uglifycss yourfile.css > yourfile.min.css
Para minimizar varios archivos CSS y JS en un directorio, puede utilizar un script bash simple que puede mejorar significativamente el rendimiento de su sitio al reducir el tamaño del archivo.
Minimizar múltiples archivos JavaScript
Cree un script Bash para minimizar todos los archivos JS.
nano minify_js.sh
Agregue el siguiente script a minify_js.sh documento.
#!/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
Haga el script ejecutable y ejecútelo.
chmod +x minify_js.sh ./minify_js.sh
Este script recorrerá todos .js archivos en un directorio, minifíquelos usando UglifyJSy crea un nuevo archivo usando .min.js expandir.
Si no desea crear un archivo nuevo, puede utilizar -o Las opciones del script bash pueden sobrescribir el archivo original.
#!/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
Minimizar múltiples archivos CSS
Del mismo modo, para minimizar todos los archivos CSS en un directorio, cree un script Bash.
nano minify_css.sh
Agregue el siguiente script a minify_css.sh documento:
#!/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
Haga el script ejecutable y ejecútelo.
chmod +x minify_css.sh ./minify_css.sh
Este script recorrerá todos .css archivos en un directorio, minifíquelos usando UglifyCSSy crea un nuevo archivo usando .min.css expandir.
Si no desea crear un archivo nuevo, puede utilizar el siguiente script bash para sobrescribir el archivo original.
#!/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
en conclusión
estrecha tu CSS y js La documentación es un proceso simple que utiliza UglifyJS y CSS feo en la CLI de Linux. Esto no sólo reduce el tamaño del archivo, sino que también ayuda a mejorar los tiempos de carga de la página.
