Question

我使用webpack-compression-plugin ta预先将所有静态文件和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版本，但它不是那样的。我通过捆绑服务器端代码来实现。 Express压缩模块不起作用，我也想要静态压缩。我没有使用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

缓存结果

使用nginx的其他解决方案，正如您在评论中发布的那样也很不错。

在节点中提供gzip html页面

1 个答案: