2017-06-24 5 views
2

Ich benutze Webpack-Kompression-Plugin, um alle meine statischen Dateien und hml-Dateien im Voraus zu Gzip und Brotli Format zu komprimieren. Wenn der Browser es unterstützt, benutze ich Brotli, wenn nicht gzip und die letzte Option ist die Originaldatei. So hätte ich zum Beispiel nach dem Bündeln so etwas.Serve gzip html-Seite in Knoten

Auf dem Server verwende ich express-static-gzip statische Dateien und alles funktioniert gut. Alle meine statischen Client-Assets werden komprimiert und so bedient.

Das Problem, das ich habe, ist mit meiner HTML-Datei, root. Obwohl ich auch gzip und br Version davon habe, wird es nicht so serviert. Ich mache es durch die Bündelung von Server-Side-Code. Express-Komprimierungsmodul funktioniert nicht und ich möchte auch statische Komprimierung. Ich benutze nginx nicht. enter image description here

+0

Haben Sie zufällig die Lösung gefunden? Ansonsten verwende ich https://stackoverflow.com/a/15323082/3241111 Das funktioniert für mich. Ich weiß nicht, wie man es für JUST .html und nicht für '.js' und' .css' bcoz benutzt Ich will nicht, dass der Server 'js' und' css' für SSR bei jeder Anfrage komprimiert. – myDoggyWritesCode

+1

I didn ' Ich finde eine einfache Lösung, aber ich habe eine gefunden. Ich habe Nginx benutzt. Mit Nginx kann ich das gzip_static-Modul verwenden, um vorkomprimierte statische Dateien und den regulären gzip-dynamischen Modus zu liefern, der nur eine html-Datei im laufenden Betrieb komprimiert. –

+0

Das ist schön. Komprimieren Sie auch Bilder? – myDoggyWritesCode

Antwort

1

Mit Hilfe dieser plugin und wie wurde vorgeschlagen here ich es

Arbeit bekam

Mein Code: Stellen Sie sicher, dass Sie haben vorge gzipped .js und .css Dateien

const checkForHTML = req => { 
    const url = req.url.split('.'); 
    const extension = url[url.length -1]; 

    if (['/'].indexOf(extension) > -1) { 
     return true; //compress only .html files sent from server 
    } 

    return false; 
}; 

var compress = require('compression'); 
app.use(compress({filter: checkForHTML})); 

const encodeResToGzip = contentType => (req, res, next) => { 
    req.url = req.url + '.gz'; 
    res.set('Content-Encoding', 'gzip'); 
    res.set('Content-Type', contentType); 

    next(); 
}; 

app.get("*.js", encodeResToGzip('text/javascript')); 
app.get("*.css", encodeResToGzip('text/css')); 

Ich wollte, dass die Komprimierung nur für .html erfolgt, weil ich die .ejs Vorlage verwende, also muss ich zur Laufzeit die Datei .html komprimieren. Das Komprimieren statischer Dateien (js/css) mit express compression ist keine gute Idee, da es bei jeder Anfrage ausgeführt wird und statische Dateien sind. Oder sonst, zwischenspeichern Sie Ihre Ergebnisse wie vorgeschlagen here

Andere Lösung mit nginx, wie Sie in Ihren Kommentaren geschrieben scheint auch nett.

+2

Ich werde sicher sein, Ihre Lösung auch das nächste Mal, wenn ich eine Chance habe, zu versuchen. Ich habe auch vergessen zu sagen, dass es ein Plugin 'brotli-compression-plugin' gibt. Brotli ist ein neuer Standard anstelle von gzip. Alles sollte gleich funktionieren. Sie haben drei Dateien .js, .js.gz und .js.br und der Browser verwendet sie in der Reihenfolge vom letzten zum ersten. Sie können es auch mit Nginx servieren. Ich denke, das ist der beste Weg für mich. Ich habe .EJS Vorlage, Bundle, Hersteller, Stile ... und jede statische Datei wird mit chunkhash generiert und es hat Cache-Header für 1 Jahr festgelegt. WEITER => –

+0

Die HTML-Datei hat keinen Cache-Header, so dass der Browser sie bei jedem Laden kontaktiert, aber alles andere zwischenspeichert. Wenn es eine Änderung unter statischen Dateien gibt, wird der Browser wissen, da es HTML kontaktiert. Auf diese Weise wird nur die geänderte Datei heruntergeladen und alles andere aus dem Cache verwendet. Es ist in diesem Fall vorteilhaft, nicht vorkomprimiertes gzip zu verwenden, aber im laufenden Betrieb. –

+0

ich auch mit '.ejs' und 'chunkhash' cached' css-js' für 1 Jahr. Ich speichere nicht index.html .. Ich weiß nicht, wie ich in diesem Fall Offline-Unterstützung bereitstellen soll ... Auch "Nicht mit vorkomprimiertem gzip, sondern im laufenden Betrieb ..." Also, in welchem ​​Fall? Ich habe css-js precached das gibt mir 200 (von Festplatte zwischengespeichert) und nicht 304 (nicht geändert) was bedeutet, vorkomprimiert ist in Ordnung @ Igor-Vuk – myDoggyWritesCode