Node.js: la minimizzazione dinamica dei file è considerata dannosa

  • Node.js
  • Gabriele Romanato

In Node.js possiamo minimizzare i file CSS e JavaScript dinamicamente anche se questa soluzione ha degli svantaggi.

Questo task ha due step distinti:

  1. creare le route in Express per le assets
  2. minimizzare i file e restituire l'output nelle nostre route.

Installiamo i moduli necessari:


npm install uglify-js --save
npm install uglifycss --save

Creiamo una classe helper per l'operazione:


'use strict';

const path = require('path');
const abs = path.dirname(process.mainModule.filename);
const ugCSS = require('uglifycss');
const ugJS = require('uglify-js');

class Assets {
    constructor(path) {
        this.asset = abs + path;
    }
    _minifyCSS(file) {
        let output = ugCSS.processFiles([file]); // Aggiungere gestione errori
        return output;
    }

    _minifyJS(file) {
        let output = ugJS.minify(file); // Aggiungere gestione errori
        return output.code;
    }

    minify() {
        let self = this;
        return new Promise((resolve, reject) => {
            if(/\.css$/.test(self.asset)) {
                resolve(self._minifyCSS(self.asset));
            } else if(/\.js$/.test(self.asset)) {
              resolve(self._minifyJS(self.asset));  
            } else {
              reject('File non valido');
            }
        });
    }
}

module.exports = Assets;

Quindi definiamo le nostre route:


'use strict';
const app = require('express')();
const Assets = require('./classes/Assets');

app.get('/assets/js/main.js', (req, res) => {
    let minifier = new Assets('/theme/js/main.js');
    minifier.minify().then(output => {
        res.set('Content-Type', 'text/javascript');
        res.send(output);
    }).catch(err => {
        // Aggiungere gestione errori
    });
});

app.get('/assets/css/main.css', (req, res) => {
    let minifier = new Assets('/theme/css/main.css');
    minifier.minify().then(output => {
        res.set('Content-Type', 'text/css');
        res.send(output);
    }).catch(err => {
        // Aggiungere gestione errori
    });
});

Non consiglio di utilizzare questa tecnica su un sito ad elevato carico poiché l'accesso continuo al filesystem puà causare dei picchi nell'uso della memoria.

Torna su