首先请原谅我的问题很愚蠢，因为我找不到详尽的解释。我用React创建了一个web应用程序，我使用了一个NPM插件来生成main.js和main.css文件的标准和Gzip压缩版本(最初main.js是1.2 Mb, Gzip压缩大约是331Kb)。
所以知道在我的"dist"文件夹:
- Index.html(默认加载标准-未压缩- main.js和main.css)
- main.js
- main.css
- main.js.gz
- main.css.gz
我应该知道些什么?
-
我想我必须把所有的东西上传到我的服务器上，并修改Index.html，这样它就会加载。gz文件来代替标准文件…但不是!如果我编辑Index.html，那么指向gzip文件，我得到一个错误"加载模块脚本失败:期望一个JavaScript模块脚本，但服务器响应MIME类型"application/x-gzip">
-
让我大吃一惊的是，在Chrome开发控制台的Network选项卡上检查，我可以在Main.js的响应头中看到"内容编码:gzip"，其大小为343Kb…它的大小与"my"不同。压缩文件，但不太远
那么，我的大问题是:发生了什么?我的服务器是否自动创建我的。js和。css文件的gzip版本(它应该看起来像…)?如果有，这些版本存储在哪里?它们是在每次有人请求时从头开始创建的吗?如果是这样，创建Main.js和Main.css文件的gzip版本有什么用?我该怎么处理它们?
非常感谢你帮助我理解一些事情!
这里的关键是Content-Type和Content-Encoding之间的区别。
HTTP的绝对基础是浏览器对URL发出HTTP请求，然后服务器决定如何响应该请求。
这个决定可以是各种不同的事情，但最基本的是在硬盘上寻找与URL路径匹配的路径，并将其与Content-Type一起提供给浏览器，说明它是什么。
所以如果你要求/foo.css，它——我们仍然在谈论一个基本的方法——会给你那个文件的内容和一个content - type，说它是CSS。而如果你要求/foo.css.gz，那么它会给你该文件的内容，并说它是一个GZip文件。
GZip文件不是CSS，因此浏览器拒绝将其视为CSS文件。它不期望能够从中提取CSS。
稍微聪明一点的方法是压缩文件。所以浏览器请求/foo.css，服务器响应foo.css但是它先压缩它，然后将压缩后的结果发送回来，其中的Content-Type表示它是CSS, Content-Encoding表示它是GZipped。
浏览器知道它可以解压缩并提取CSS。
(有一些额外的复杂性，浏览器告诉服务器它是否支持压缩，但我不会详细说明)。
现在，如果您想保存动态压缩CSS文件所需的资源(这将需要重复压缩或缓存)，那么下一个复杂级别是
浏览器请求/foo.css，服务器看到磁盘上有一个foo.css，但旁边也有一个foo.css.gz。然后，它将后者发送回，并附带Content-Type(表示它是CSS)和Content-Encoding(表示它是gzip)。
您正在使用的服务器似乎支持并配置为执行这三种方法中的第二种，而不是最复杂的一种。