工作原理

Question

我无法使gzip工作。我想事先制作gzip文件。我用compression-webpack-plugin做到了。我通常在服务器上使用这些文件。

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

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

我赞美这些文件。

<head>
    <meta charset="UTF-8" />
    <title>Q</title>
      <link rel='stylesheet' type='text/css' href="stylesLocal.29kf81a60pl57850llfi.js.gz">
</head>

  <body>
      <div id="app"><%- app %></div>
      <script src="bundle.2720b1a98103167676ac.js.gz"></script>
      <script src="vendor.57erz1a981hk5786756u.js.gz"></script>
  </body>
</html>

如果我没有gzip文件，一切正常，但是当我发送.gz文件时，它会中断。我正在读取我应该设置内容编码：gzip 和内容类型，我尝试了但是无论文件内容类型是什么我都抱怨它因为我发送css， js和文本文件。不知道如何使这项工作？

Answer 1

听起来你已经在服务器上有.gz文件了。如果你想让Express为他们服务，你需要我们像connect-gzip-static：https://github.com/pirxpilot/connect-gzip-static

工作原理

我们首先找到所有压缩文件（即带有文件的文件）根目录中的.gz和.br扩展名）。所有HTTP GET和HTTP HEAD 将Accept-Encoding标头设置为gzip的请求进行检查压缩文件列表，如果可能，通过返回来完成压缩版本。如果没有找到压缩版本或者如果请求没有适当的Accept- Encoding标头，请求的处理方式与标准静态中间件处理它的方式相同。

Answer 2

从我收集的内容中，您捆绑文件，运行压缩以获得.gz版本，并且HTML应该调用NON-gzip版本。

这会告诉你你想要什么吗？

https://forum-archive.vuejs.org/topic/4059/adding-gzip-to-webpack-using-compression-plugin

修改

删除.gz

<script src="bundle.2720b1a98103167676ac.js"></script> <script src="vendor.57erz1a981hk5786756u.js"></script>

原因：浏览器告诉服务器它是否支持GZip，如果支持，则发送文件的.gz版本，否则发送文本版本。浏览器解码文件，并将其加载到html中。你看到的只是解码版本。

如果服务器发送.gz版本，但它在浏览器中断开，那么.gz文件没有正确生成。

gzip和webpack压缩

2 个答案:

工作原理