我的react-admin包很大(860KB)

Question

我已经尝试过配置各种不同的优化方法，但我的react-admin包大小仍然很大，为860KB。

我能做些什么呢？正常吗？可能的原因是什么？我会马上贴上我的webpack配置的链接。

我不认为现在有任何聪明的方法来做代码拆分。我已经实现了很少的资源，它们应该总是一起使用。

我常用的webpack配置链接：https://pastebin.com/t6uMWiJ6

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/components/index.js'
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/js/[name].[contenthash:8].js'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          babelrc: true
        }
      },
      { test: /\.json$/, loader: 'json-loader' },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        exclude: [/\.(js|jsx)$/, /.html$/, /.css$/, /.json$/],
        loader: 'file-loader',
        options: {
          name: 'static/media/[name].[contenthash:8].[ext]'
        }
      }
    ]
  },

  resolve: {
    unsafeCache: true,
    extensions: ['.js', '.jsx', '.json', '.css'],
    alias: {
      actions: path.resolve(__dirname, './src/actions'),
      reducers: path.resolve(__dirname, './src/reducers'),
      components: path.resolve(__dirname, './src/components'),
      lib: path.resolve(__dirname, './src/components/_lib'),
      styles: path.resolve(__dirname, './src/styles'),
      config: path.resolve(__dirname, './src/config')
    }
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/public/index.html',
      favicon: './src/public/favicon.ico'
    }),
    new webpack.PrefetchPlugin('react'),
    new webpack.PrefetchPlugin('react-dom')
  ],

  optimization: {
    usedExports: true
  }
};

下面是我的依赖项

{
  "dependencies": {
    "@babel/runtime": "^7.9.2",
    "@material-ui/core": "^4.9.13",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/pickers": "next",
    "connected-react-router": "^6.8.0",
    "final-form": "^4.19.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.25.3",
    "prop-types": "^15.7.2",
    "ra-core": "^3.5.0",
    "ra-data-simple-rest": "^3.2.2",
    "react": "^16.12.0",
    "react-admin": "^3.1.1",
    "react-dom": "^16.12.0",
    "react-final-form": "^6.4.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "next",
    "webpack-bundle-analyzer": "^3.7.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "^2.2.0",
    "webpack-merge": "^4.2.2"
  },
  "peerDependencies": {
    "history": "^4.10.1",
    "immutable": "^4.0.0-rc.12",
    "seamless-immutable": "^73.1.4"
  },
  "sideEffects": [
    "*.css"
  ]
}

Answer 1

树抖动可能是你需要注意的。请参阅https://webpack.js.org/guides/tree-shaking/

请注意，正如他们上面所说的，在源代码中导入模块的方式在这里非常重要。

但从本质上讲，它应该使webpack能够只捆绑npm包中需要的部分。