Gzip和Webpack压缩

Question

Gzip和Webpack压缩

5

我无法使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>

如果我不压缩文件，一切正常。但是当我发送.gz文件时，就出问题了。我看到建议设置Content-Encoding: gzip和Content-Type。我尝试了这样做，但无论我设置什么文件content-type，它都会报错，因为我正在发送css、js和文本文件。不知道该如何解决这个问题？

- Igor-Vuk

你是说“但是当我发送 .gz 文件时会出问题”，什么意思？你是怎么发送的？ - Phillip Williams

2个回答

0

根据我的理解，您需要将文件打包，并运行压缩以生成可用的.gz版本，然后您的HTML应该调用非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文件未正确生成。

- Phillip Williams

谢谢Philip。那没有太大的帮助。它基本上展示了如何使用webpack制作.gz文件。我已经会这个了，我想知道如何展示它们，将内容呈现在屏幕上。我感觉有些关键内容缺失了。我一直看到nginx，但我现在只是在本地开发。我更新了我的代码以更好地表示正在发生的事情。我有客户端和服务器捆绑文件。我用客户端捆绑文件制作.gz文件。我没有在服务器webpack中这样做。我在ejs/html中调用这些文件。我在客户端使用extract-text-wenpack-plugin来提取CSS，在服务器捆绑中使用html-webpack-plugin来处理HTML。 - Igor-Vuk

浏览器看到的HTML示例是什么？而不是服务器上的模板。 - Phillip Williams

在 HTML 中删除文件扩展名 .gz，例如：bundle.2720b1a98103167676ac.js。服务器根据浏览器是否支持 GZIP 来决定是否使用 .gz。 - Phillip Williams

完整的CURL头响应是什么？ - Phillip Williams

让我们在聊天中继续这个讨论。 - Phillip Williams

显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- olore · Accepted Answer

听起来你已经在服务器上有.gz文件了。如果你想要Express将它们提供出来，你需要使用像connect-gzip-static这样的东西：https://github.com/pirxpilot/connect-gzip-static

它是如何工作的

我们首先定位根目录中所有压缩文件（即扩展名为.gz和.br的文件）。所有带有Accept-Encoding头设置为gzip的HTTP GET和HTTP HEAD请求都会与压缩文件列表进行比较，如果可能，将返回压缩版本以满足请求。如果找不到压缩版本或请求没有适当的Accept-Encoding头，则该请求将以与标准静态中间件相同的方式处理。