服务节点中的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页面

回答

相关问题