reactjs - React webpack 包大小很大

Question

我有一个使用 react 开发的网站，它只有一个页面，但生产包大小为 1.11 MiB。我正在为这个应用程序使用 firestore、firebase 存储、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-analyser，我假设您的构建过程使用了 webpack。因此，您的选择如下:
你可以使用 Webpack 的 Tree Shaking Guide .
Material UI 还有一个 Minimizing Bundle Size指导。
一般来说，包大小减少的很大一部分是死代码消除。
完成此操作后，您可能需要关注 React 的 Code Splitting。指导以确保初始加载更快。