使用React，Webpack和Apache启用文本压缩

Question

据说这个插件是应该做的。

我用npm安装了插件

npm install compression-webpack-plugin --save-dev

并编辑了我的webpack.config.js文件，使其包含

const CompressionPlugin = require('compression-webpack-plugin');

...
  plugins: [
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.(js|css)$/i,
    }),
...

当我使用页面洞察力检查我的网页加载速度时，似乎无法识别我的gz文件，或者至少其中一个文件未被识别

这是我的主目录

---

这个问题与我的问题非常相似。我试图避免使用.htaccess，因为我听说某处它不是与react和webpack一起使用的最佳方法。也许这是错误的？

我尝试使用kushalvm的解决方案，但对我而言不起作用。

Answer 1

简短的答案：kushalvm的解决方案不完整。为了使用gzip / brotli压缩页面大小，有两个步骤：

1. 在构建时创建.gz/ .br文件（或由服务器动态生成）
2. 服务他们（而不是.js文件）

而您正在做第一部分，而不是第二部分。因为当您构建一个React项目（在客户端渲染-CSR的情况下）时，您只需创建一个.html文件即可导入一些脚本标签（您的React项目）。如果将brotli或压缩插件用于webpack，则已经创建了一些.gz/.br文件，但是HTML文件仍会导入旧.js脚本。

那么，可以使用哪些不同的方法来提供配置服务器所需的压缩文件（您不能仅通过更改React配置来做到这一点）

解决方案

1）如果您使用客户端渲染，则可以创建一个自定义的快速服务器来提供文件，这非常简单，只需不到10行代码，您可以在Official React Docs中阅读有关此文档的文档（express-static-gzip），因此您的服务器文件将如下所示：

const express = require('express');
const path = require('path');
const app = express();

app.use(
  expressStaticGzip(path.join(__dirname, 'build'), {
  enableBrotli: true, // only if you have brotli files too
  }),
);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

该服务器将读取build目录中的文件，如果对某些js资产的请求到达，它将检查（浏览器是否支持压缩，并且是否存在压缩文件）然后提供压缩文件

2）如果您使用SSR（例如Next.js或React-Starter-kit），则可以创建一个自定义快递服务器，并使用与上面相同的方法。

3）如果使用Apache Web服务器，则可以使用Apache gzip / brotli压缩配置文件，如下所示：

# enable the rewrite capabilities
RewriteEngine On

# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore

# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /

# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.html $1\.html\.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.html\.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip

4）如果您使用Netlify或AWS之类的第三方JamStack / CDN提供程序，则它们具有一些配置供您启用动态gzip。