React webpack捆绑包大小很大

Question

我有一个使用react开发的网站，它只有一个页面，但产品包大小是1.11MIB。我正在使用firestore、firebase storage、material UI、react redux，该应用程序运行良好，除了捆绑包大小外，一切正常。

我的网页包配置文件

    const path = require('path');
var CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'production',
  entry: './src/public/index.js',
  plugins: [
    new BundleAnalyzerPlugin({
      generateStatsFile : true
    }),
    new CompressionPlugin({
      deleteOriginalAssets: false,
      filename: "[path][base].gz",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      // Compress all assets, including files with `0` bytes size
      // minRatio: Infinity

      // Compress all assets, excluding files with `0` bytes size
      // minRatio: Number.MAX_SAFE_INTEGER
      minRatio: 0.8,
    })

  ],
  optimization: {
    nodeEnv: 'production',
    minimize: true,
    concatenateModules: true,

  },

  module: {
    rules: [{
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'image-webpack-loader',
        // This will apply the loader before the other ones
        enforce: 'pre',
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              ["@babel/plugin-proposal-object-rest-spread", {
                "definitions": {
                  "process.env": {
                    "NODE_ENV": "\"production\""
                  }
                }
              }],
              ['babel-plugin-transform-imports',
                {
                  '@material-ui/core': {
                    // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
                    'transform': '@material-ui/core/esm/${member}',
                    'preventFullImport': true
                  },
                  '@material-ui/icons': {
                    // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
                    'transform': '@material-ui/icons/esm/${member}',
                    'preventFullImport': true
                  }
                }
              ]
            ]
          }
        }
      }

    ]
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

我不知道我在这里错过了什么来减小节点模块的大小。如果我们有任何其他选择，以减少捆绑大小，请给我一个建议。

Answer 1

确保在生产模式下运行webpack。为此，运行带有-p标志的webpack，如下所示：

webpack -p

此小标志用于优化捆绑包大小：

1. 使用UglifyJs启用缩小。它删除了不必要的空格、新行、无法访问的代码等。
2. 将节点_ENV设置为“生产”。这会告诉某些包（如React）不包含调试代码

如果对你不起作用，请试试这个

Answer 2

你可以单独进口乐果

import get from 'lodash/get'

而不是

import { get } from 'lodash'

但我敢打赌这不会大幅减少您的捆绑包大小

Answer 3

MaterialUI、lodash和网页包支持树震动。由于您使用了webpack bundle Analyzer，我假设您的构建过程使用webpack。因此，您的选择如下：

您可以使用Webpack的摇树指南。

材质UI也有一个最小化捆绑包大小指南。

通常，包大小减少的很大一部分是死代码消除。

完成此操作后，您可能希望遵循React的代码拆分指南，以确保初始加载更快。