React webpack 包大小很大

Question

我有一个使用 React 开发的网站，它有一个页面，但生产包大小为 1.11 MiB。我正在使用 firestore、firebase storage、material-UI、react-redux 这个应用程序，应用程序运行良好，除了包大小之外，一切都很好。

我使用 webpack-bundle-analyzer 来分析包大小，看起来 nodemodules 占用了很大的大小。在这里我添加了屏幕截图。

我的 webpack 配置文件

    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

MaterialUI、lodash 和 webpack 支持Tree Shaking。由于您使用了 webpack-bundle-analysisr，我假设您的构建过程使用了 webpack。所以你的选择如下：

您可以使用 Webpack 的Tree Shaking Guide。

Material UI 还有一个最小化捆绑包大小指南。

一般来说，包大小减少的很大一部分是消除死代码。

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