Il y a quelque temps, j'ai écrit un site avec un backend sur
Express /Node.JS. Il y avait un problème avec la minimisation des réponses. J'ai trouvé de nombreux packages prêts à l'emploi, mais tout le monde avait un problème - html après que les modèles n'aient pas été minifiés. En conséquence, j'ai décidé d'écrire mon propre petit vélo natif - la
bibliothèque web-minify , qui vous permet d'intégrer un crochet avant de l'envoyer au client et de modifier la réponse.
Installation du package
npm i @dmitriym09/web-minify --save
Je pense que la meilleure description d'une bibliothèque pour un développeur est un exemple de code =)
Exemple
web-minify - fonction 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; } } ]));
Dans cet exemple, toutes les réponses avec Content-Type contenant la sous-chaîne «css» seront interceptées. Le corps de réponse est traité à l'aide de
csso ,
postcss ,
precss ,
autoprefixer . La chaîne est passée dans le paramètre contentType (une entrée sera recherchée pour String.prototype.indexOf ()) ou RegExp (RegExp.prototype.test ()). Le paramètre minify - Function (data: String, req: Request, res: Response), devrait renvoyer une chaîne avec un nouveau corps ou promesse, qui à son tour est résolu par chaîne. En cas d'exception non capturante, le client recevra une réponse de 500.
Comme déjà dit, la plupart des bibliothèques populaires existantes avec des fonctionnalités similaires réduisent bien les fichiers statiques. Cependant, la minification des réponses générées dans le code (par exemple, html par le moteur de modèle) ne fonctionne pas. L'un des problèmes est que la réponse peut être envoyée en plusieurs parties et que, pour le traitement, des données complètes sont généralement nécessaires. En conséquence, vous devez intercepter tous les envois à l'utilisateur, les collecter et les traiter et les envoyer à la fin. Ceci doit être pris en compte lors de l'utilisation de
web-minify : le fichier téraoctet que vous souhaitez envoyer au client et qui tombe sous contentType s'accumule en mémoire.
Des exemples
Minification HTML utilisant html-minifier à partir de tests unitaires
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) });
Modifications de JSON et du code retour Promise à partir de tests unitaires
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 sur
github et en
npm sous la licence MIT.
Merci de votre attention! Les critiques, suggestions et commentaires sont les bienvenus!