2

我使用 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。 在此处输入图像描述

4

1 回答 1

1

在这个插件的帮助下，正如这里所建议的，我让它工作了

我的代码： 确保您已预先压缩.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。使用压缩静态文件（js/css）express compression并不是一个好主意，因为它会在每个请求上执行它，而这些都是静态文件。或者，按照此处的建议缓存您的结果

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

于 2017-07-16T20:14:07.053 回答