react 打包优化开启gzip压缩详细解释（Vue同样适用）

React 打包优化中的 Gzip 压缩是一种减少传输文件大小的常用方法。以下是开启 Gzip 压缩的详细步骤：

1. 准备工作

确保你已经安装了 Node.js 和 npm（或 yarn），并且已经创建了一个 React 应用。如果你使用的是 Create React App (CRA)，Webpack 已经为你配置了基础的打包设置。

2. 暴露配置文件（如果使用 Create React App）

CRA 隐藏了配置文件，但你可以通过运行以下命令来“暴露”它们：

npm run eject

注意：这个命令会将配置文件从 node_modules 中复制到你的项目中，并且这个操作是不可逆的。一旦执行，你将无法使用 CRA 的内建脚本。因此，只有在你确定需要修改配置时才执行此命令。

3. 安装必要的包

对于服务器端的 Gzip 压缩，你需要安装一个中间件，例如

compression

。在你的项目中运行以下命令：

npm install compression

或者如果你使用 yarn：

yarn add compression

4. 配置服务器

在你的服务器配置中，使用

compression

中间件来启用 Gzip 压缩。例如，如果你使用 Express 作为服务器：

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

app.use(compression());

5. 配置 Webpack（如果手动配置）

如果你没有使用 CRA 或者你已经 eject 了，你可能需要在 Webpack 配置中添加 Gzip 插件。可以使用

compression-webpack-plugin

：

首先安装插件：

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

或者：

yarn add compression-webpack-plugin --save-dev

修改 React 项目的 Webpack 配置（在 Webpack.config.js 配置文件中添加插件）：

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

module.exports = {
  // ...其他配置
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$/, // 指定压缩的文件类型
      threshold: 10240, // 文件大小超过10KB时才压缩
      minRatio: 0.8, // 压缩后文件至少需要减小20%，否则不压缩
    }),
  ],
};

修改 Vue 项目的 Webpack 配置（通常在

vue.config.js

文件中）：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css|html)$/, // 压缩 JS、CSS 和 HTML 文件
        threshold: 10240, // 文件大小超过 10KB 时才压缩
        minRatio: 0.8, // 压缩后文件至少需要减小 20%
      }),
    ],
  },
};

注意：正则表达式根据自身需要自由改变需要压缩的类型（html、css、js）

6. 验证配置

配置完成后，你需要构建你的应用并检查 Gzip 是否生效：

通过这些步骤，你可以为你的 React 应用开启 Gzip 压缩，从而减少传输数据的大小，加快加载速度

• 运行构建命令（如果你使用 CRA）：npm run build
• 检查构建的文件，确认它们是否被压缩。
• 使用在线工具（如 Gidole's GZIP compressor head）检查你的网站是否启用了 Gzip 压缩。
• 要验证是否被压缩，可以使用浏览器的开发者工具。在“网络”(Network) 面板中，查看请求的响应头，确认 Content-Encoding 是否为 gzip。此外，你还可以通过查看文件大小来直观地评估压缩效果。

• 注意事项

• Gzip 压缩对文本文件（如 HTML、CSS、JavaScript）最有效，对已经压缩过的文件（如图片、视频）效果不大。
• 确保你的服务器和客户端都支持 Gzip。一些 CDN 和托管服务可能已经默认启用了 Gzip 压缩。
• 考虑使用 .htaccess 文件（如果你的服务器支持 Apache）或服务器配置文件来自动配置 Gzip 压缩，这样可以避免在应用代码中进行配置。