如何使用 create-react-app 命令添加 gzip 以响应应用程序

Question

我是 React 编程的新手。我使用 create-react-app 命令创建了一个 React 应用程序。为了生成构建，我是运行ning npm 运行 build 命令（react-scripts build）。我的应用程序的构建大小为 2.5 MB，我想减小应用程序的大小。我查看了 SO，发现有些人正在使用 webpack 和 gzip 插件来减小应用程序的大小。但是，如果您使用 create-react-app 命令生成 React 应用程序，我们将无法看到 webpack 配置，除非 npm 运行 eject。那么有什么方法可以为我的 React Web 应用程序添加 gzip 压缩。

Answer 1

安装compression-webpack-plugin

将其添加到您的 webpack.config.js 文件中

const CompressionPlugin = require('compression-webpack-plugin');
            
module.exports = function(webpackEnv) {
 ...
 return {
    plugins: [
        ...
        isEnvProduction && 
            new CompressionPlugin({
              algorithm: "gzip",
              test: /\.js$|\.css$|\.html$/,
              threshold: 10240,
              minRatio: 0.8
            }),
    ]
  }
}

如何使用 create-react-app 命令添加 gzip 以响应应用程序

How to add gzip to react app with create-react-app command

gzip

reactjs

webpack