Vor einiger Zeit habe ich eine Site mit einem Backend auf
Express /Node.JS geschrieben. Es gab ein Problem mit der Minimierung der Antworten. Ich habe viele fertige Pakete gefunden, aber jeder hatte ein Problem - HTML, nachdem Vorlagen nicht minimiert wurden. Aus diesem Grund habe ich beschlossen, mein eigenes kleines und natives Fahrrad zu schreiben - die
Web-Minify-Bibliothek , mit der Sie einen Hook einbetten können, bevor Sie ihn an den Client senden und die Antwort ändern.
Paketinstallation
npm i @dmitriym09/web-minify --save
Ich denke, die beste Beschreibung einer Bibliothek für einen Entwickler ist Codebeispiel =)
Beispiel
Web-Minify - Middleware-Funktion:
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; } } ]));
In diesem Beispiel werden alle Antworten mit Content-Type, die den Teilstring "css" enthalten, abgefangen. Der Antworttext wird mit
csso ,
postcss ,
precss und
autoprefixer verarbeitet . String wird im Parameter contentType übergeben (ein Eintrag wird nach String.prototype.indexOf () durchsucht) oder RegExp (RegExp.prototype.test ()). Der minify-Parameter - Funktion (Daten: String, req: Request, res: Response) sollte einen String mit einem neuen Body oder Promise zurückgeben, der wiederum von String aufgelöst wird. Im Falle einer nicht abfangenden Ausnahme erhält der Client eine Antwort von 500
Wie bereits erwähnt, minimieren die meisten vorhandenen populären Bibliotheken mit ähnlichen Funktionen statische Dateien. Die Minimierung der im Code generierten Antworten (z. B. HTML durch die Vorlagen-Engine) funktioniert jedoch nicht. Eines der Probleme besteht darin, dass die Antwort in Teilen gesendet werden kann und für die Verarbeitung normalerweise vollständige Daten benötigt werden. Dementsprechend müssen Sie alle Sendungen an den Benutzer abfangen, sammeln und verarbeiten und am Ende senden. Dies sollte bei der Verwendung von
Web-Minify berücksichtigt werden: Die Terabyte-Datei, die Sie an den Client senden möchten und die unter contentType fällt, sammelt sich im Speicher an.
Beispiele
HTML-Minimierung mit HTML-Minifier aus Unit-Tests
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) });
Änderungen an JSON und dem Promise-Rückkehrcode aus Unit-Tests
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 ist auf
Github und in
npm unter der MIT-Lizenz verfügbar.
Vielen Dank für Ihre Aufmerksamkeit! Kritik, Anregungen und Kommentare sind willkommen!