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

Question

我是反應編程的新手。 我使用 create-react-app 命令創建了一個反應應用程序。 為了生成構建，我正在運行 npm run build 命令（react-scripts build）。 我的應用程序的構建大小是 2.5 MB，我想減小應用程序的大小。 我查看了 SO，發現有些人正在使用 webpack 和 gzip 插件來減小應用程序的大小。 但是，如果您使用 create-react-app 命令生成 react 應用程序，我們將無法看到 webpack 配置，除非 npm run 彈出。 那么有什么方法可以將 gzip 壓縮添加到我的 React Web 應用程序中。

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
                    }),
            ]
         }
        }