Hace algún tiempo escribí un sitio con un backend en
Express /Node.JS. Hubo un problema con la minimización de las respuestas. Encontré muchos paquetes listos, pero todos tenían un problema: html después de que las plantillas no se minimizaran. Como resultado, decidí escribir mi propia bicicleta pequeña y nativa: la
biblioteca web-minify , que le permite incrustar un gancho antes de enviarlo al cliente y modificar la respuesta.
Instalación del paquete
npm i @dmitriym09/web-minify --save
Creo que la mejor descripción de una biblioteca para un desarrollador es el ejemplo de código =)
Ejemplo
web-minify - función de middleware:
const htmlminify = require('html-minifier').minify; const csso = require('csso').minify; const postcss = require('postcss'); const precss = require('precss'); const autoprefixer = require('autoprefixer'); const minify = require('web-minify'); app.use(minify([ { contentType: /css/, minify: async (data, req, res) => { let resData = (await postcss([precss, autoprefixer]).process(data, { from: undefined })).css; resData = csso(resData).css; return resData; } } ]));
En este ejemplo, todas las respuestas con Content-Type que contenga la subcadena "css" serán interceptadas. El cuerpo de la respuesta se procesa usando
csso ,
postcss ,
precss ,
autoprefixer . La cadena se pasa en el parámetro contentType (se buscará una entrada para String.prototype.indexOf ()) o RegExp (RegExp.prototype.test ()). El parámetro minify - Función (datos: String, req: Request, res: Response), debe devolver un String con un nuevo cuerpo o Promise, que a su vez se resuelve mediante String. En caso de una excepción no capturadora, el cliente recibirá una respuesta de 500.
Como ya se dijo, la mayoría de las bibliotecas populares existentes con una funcionalidad similar minimizan bien los archivos estáticos. Sin embargo, la minificación de las respuestas generadas en el código (por ejemplo, html por el motor de plantillas) no funciona. Uno de los problemas es que la respuesta se puede enviar en partes, y para el procesamiento generalmente se necesitan datos completos. En consecuencia, debe interceptar todo el envío al usuario, recopilarlo, procesarlo y enviarlo al final. Esto debe tenerse en cuenta al usar
web-minify : el archivo de terabytes que desea enviar al cliente y que se encuentra en contentType se acumula en la memoria.
Ejemplos
Minificación de HTML usando html-minifier de pruebas unitarias
const htmlminify = require('html-minifier').minify; it('HTML', (done) => { const app = createServer([minify([ { contentType: 'html', minify: (data) => { let res = htmlminify(data, { removeAttributeQuotes: true, collapseWhitespace: true, conservativeCollapse: false, decodeEntities: true, keepClosingSlash: false, preserveLineBreaks: false, preventAttributesEscapin, processConditionalComments: true, removeAttributeQuotes: true, removeComments: true, trimCustomFragments: true, useShortDoctype: true }); return res; } } ])], function(req, res) { res.setHeader('Content-Type', 'text/html; charset=utf-8'); res.end(`<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h1>Test</h1> <p>Test</p> </body>`); }); request(app) .get('/') .set('Accept', 'text/html; charset=utf-8') .expect('Content-Type', 'text/html; charset=utf-8') .expect('<!doctype html><html lang=en><head><meta charset=utf-8></head><body><h1>Test</h1><p>Test</p></body></html>') .expect(200) .end(done) });
Modificaciones a JSON y al código de retorno de Promise de pruebas unitarias
it('JSON', (done) => { const app = createServer([minify([ { contentType: /json/, minify: (data, req, res) => { return new Promise(function(resolve, reject) { try { res.statusCode = 456; let o = JSON.parse(data); o.dt = new Date('2018-09-28T11:05:13.492Z') resolve(JSON.stringify(o)) } catch(exc) { reject(exc) } }) } } ])], function(req, res) { res.setHeader('Content-Type', 'application/json; charset=utf-8'); res.end(JSON.stringify({a: 12})); }); request(app) .get('/') .set('Accept', 'applicatio3n/json; charset=utf-8') .expect('Content-Type', 'application/json; charset=utf-8') .expect('{"a":12,"dt":"2018-09-28T11:05:13.492Z"}') .expect(456) .end(done) });
Web-minify está disponible en
github y en
npm bajo la licencia MIT.
Gracias por su atencion! ¡Críticas, sugerencias y comentarios son bienvenidos!