reactjs - 使用 React、Webpack 和 Apache 启用文本压缩

Question

据说the compression-webpack-plugin应该这样做。

我使用 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,
    }),
...

当我使用page insights时要检查我的网页加载速度，我的 gz 文件似乎无法识别，或者至少其中一个文件无法识别

这是我的主目录

<小时/>

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

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

Answer 1

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

1. 在构建时创建 .gz/.br 文件(或由服务器动态生成它们)
2. 为它们提供服务(而不是 .js 文件)

你正在做第一部分，但没有做第二部分。因为当您构建一个 React 项目(在客户端渲染 - CSR 的情况下)时，您只需创建一个导入一些脚本标记(您的 React 项目)的 .html 文件。如果您使用brotli或compression您已经创建了一些 .gz/.br 文件，但 HTML 文件仍然导入了旧的 .js 脚本。

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

解决方案

1)如果您使用客户端渲染，您可以创建一个自定义的express服务器用于提供文件服务，这非常简单，只需不到10行代码，您可以在the 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);

该服务器将读取构建目录中的文件，如果对某些 js 资源的请求到达，它会检查(浏览器是否支持压缩，以及是否存在压缩文件)，然后提供压缩文件

2) 如果您使用 SSR(例如 Next.js 或 React-Starter-kit)，您可以创建自定义 Express 服务器，并使用与上面相同的方法.

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) 如果您使用第三方 JamStack/CDN 提供商(例如 Netlify 或 AWS)，他们有一些配置供您启用动态 gzip。