服務節點中的gzip html頁面

我使用webpack-compression-plugin將我的所有靜態文件和hml文件事先壓縮爲gzip和brotli格式。如果瀏覽器支持它，我使用brotli，如果不是gzip並且最後一個選項是原始文件。所以我會在捆綁後有這樣的事情。服務節點中的gzip html頁面

bundle.js 
bundle.js.gz 
bundle.js.br

在服務器上，我使用express-static-gzip來提供靜態文件，並且一切正常。我所有的客戶端靜態資產都是以這種方式壓縮和提供的。

import expressStaticGzip from 'express-static-gzip' 
const app: Express = new Express() 
process.env.PWD = process.cwd() 

app.set('view engine', 'ejs') 
app.set('views', path.join(process.env.PWD + '/src/server/views')) 

app.use(expressStaticGzip(path.join(process.env.PWD + '/src/dist'), {indexFromEmptyFile: false, enableBrotli: true, maxAge: '1y'})) 

app.use((req, res, next) => { 
    res.set('Cache-Control', 'no-cache') 
    return next() 
}) 

/* Use server side rendering for first load */ 
app.use(appRenderer) 

// Routes 
app.get('*', (req, res) => { 
    res.render('index') 
}) 

app.listen(PORT,() => { 
    console.log(` 
    Express server is up on port ${PORT} 
    Production environment 
    `) 
})

我遇到的問題是我的html文件，root。雖然我也有它的gzip和br版本，但不是那樣。我通過捆綁服務器端代碼來製作它。 Express壓縮模塊不起作用，我也想靜態壓縮。我沒有使用nginx。

來源

2017-06-24 Igor-Vuk

您是否碰巧找到解決方案？否則，我使用https://stackoverflow.com/a/15323082/3241111這適用於我。不知道，如何使用它只是.html而不是'.js'和'.css' bcoz我不希望服務器爲每個請求的SSR壓縮'js'和'css' – myDoggyWritesCode

我沒有'找到簡單的解決方案，但我找到了一個。我使用了Nginx。使用Nginx，我可以使用gzip_static模塊來提供預壓縮的靜態文件和常規的gzip動態模式，這些模式可以即時壓縮html文件。 –

很好。你是否也壓縮圖像？ – myDoggyWritesCode

有了這個plugin的幫助和建議here我得到它的工作

我的代碼： 確認您已經預先gzip壓縮.js和.css文件

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'));

我只想爲.html發生壓縮，因爲我使用.ejs模板，所以需要在運行時壓縮.html。使用express compression壓縮靜態文件（js/css）不是個好主意，因爲它會在每個請求上執行並且這些文件都是靜態文件。否則，緩存您的結果建議here

其他解決方案使用nginx，因爲你張貼在你的評論也似乎很好。

來源

2017-07-16 20:14:07 myDoggyWritesCode

下次我有機會時，我一定會嘗試您的解決方案。我也原諒說，有一個插件'brotli-compression-plugin'。 Brotli是一個新的標準，而不是gzip。一切都應該一樣。您有三個文件.js，.js.gz和.js.br，瀏覽器按從上到下的順序使用它。你也可以用Nginx來提供它。我認爲這是對我來說最好的方式。我有.ejs模板，包，供應商，樣式...每個靜態文件都是用chunkhash生成的，並且它的緩存頭部設置爲1年。 CONTINUE => –

Html文件沒有緩存頭，因此瀏覽器會在每次加載時聯繫它，但會緩存其他所有內容。如果在靜態文件中有變化，瀏覽器將會知道，因爲它會聯繫html。這樣它將只下載更改的文件並使用緩存中的所有內容。在這種情況下，不使用預壓縮的gzip，而是在飛行中使用。 –

我也在用'。ejs'並擁有'chunkhash'緩存'css-js' 1年。沒有緩存index.html ..我不知道如何在這種情況下提供離線支持...此外，「不使用預壓縮的gzip，但在飛行中......」意思，在這種情況下？我已經預告了css-js，它給了我200（從磁盤緩存）而不是304（未修改），這意味着，預壓縮很好@Igor-Vuk – myDoggyWritesCode

服務節點中的gzip html頁面

回答

相關問題