提供预制的 gzip 文件答案

【问题标题】：Serve pre-made gzip files提供预制的 gzip 文件
【发布时间】：2017-11-24 10:57:00
【问题描述】：

我在打包过程中使用compression-webpack-plugin 制作gzip 文件，所以打包完成后，我的dist 文件夹中有这样的文件。

bundle.eefaef91f71795847e74.js
bundle.eefaef91f71795847e74.js.gz
vendor.jduu4f4lj71759dj7e74.js
vendor.jduu4f4lj71759dj7e74.js.gz
stylesLocal.b7ac53d721aca93e4e65099cf74dc90f.css
stylesLocal.b7ac53d721aca93e4e65099cf74dc90f.css.gz

在服务器内部，我使用express-static-gzip 来提供我的 gzip 文件。为什么这不起作用。我的页面甚至不想加载？如果我把 Express.static 而不是 expressStaticGzip 它工作正常。

import Express from 'express'
import path from 'path'
import conf from './conf'
import appRenderer from './appRenderer'
import webpackUtils from './webpackUtils'
var expressStaticGzip = require('express-static-gzip')

const APP_PORT: number = conf.APP_PORT
const PORT: any = process.env.PORT || APP_PORT

const app: Express = new Express()

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

app.use(expressStaticGzip(path.join(__dirname, '../', 'dist')))

/* check with the server before using the cached resource */
app.use((req: Object, res: Object, next: () => void): void => {
  res.set('Cache-Control', 'no-cache')
  return next()
})

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

/* Use CommonChunks and long term caching */
app.use(webpackUtils)

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

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

我在我的 index.ejs 文件中引用它们。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

    <title>D</title>

      <link rel='stylesheet' type='text/css' href="stylesLocal.b7ac53d721aca93e4e65099cf74dc90f.css">
</head>

  <body>

      <div id="app"><%- app %></div>
      <script src="vendor.jduu4f4lj71759dj7e74.js"></script>
      <script src="bundle.eefaef91f71795847e74.js"></script>

  </body>
</html>

【问题讨论】：

标签： node.js webpack gzip

【解决方案1】：

正如readme of express-static-gzip 中所述，语法与express.static 略有不同。

代替

app.use(expressStaticGzip(path.join(__dirname, '../', 'dist')))

试试

app.use('/', expressStaticGzip(path.join(__dirname, '../', 'dist')))

【讨论】：