在节点中提供 gzip html 页面

Question

我使用 webpack-compression-plugin 预先将我所有的静态文件和 hml 文件压缩为 gzip 和 brotli 格式。如果浏览器支持它，我使用 brotli，如果不是 gzip，最后一个选项是原始文件。所以我会在捆绑后得到类似的东西。

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 版本，但它不是那样的。我通过捆绑服务器端代码来实现它。快速压缩模块不起作用，我也想要静态压缩。我没有使用 nginx。

Answer 1

在plugin 的帮助下，正如here 所建议的那样，我得到了它的工作

我的代码： 确保您已预压缩 .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

缓存您的结果

您在 cmets 中发布的其他使用 nginx 的解决方案似乎也不错。