我的react-admin bundle大小很大(860KB)

Question

我已经尝试配置各种不同的优化方法，但我的react-admin bundle大小一直很大，达到860KB。

我可以做些什么？这正常吗？可能的原因是什么？我一会儿会把我的webpack配置的链接贴出来。

我不认为有什么聪明的方法可以做到代码分割。我已经实现了一些资源，它们应该总是一起使用。

链接到我常用的webpack配置。https:/pastebin.comt6uMWiJ6

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指南三摇一摆

注意，就像上面说的，你在源代码中导入模块的方式在这里也很重要。

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