Как мне уменьшить размер пакета реагирующих приложений с помощью Webpack, Babel, Material UI и Firebase? - PullRequest
Новая
       37

Как мне уменьшить размер пакета реагирующих приложений с помощью Webpack, Babel, Material UI и Firebase?

0 голосов
/ 21 апреля 2020

Вот сборка моего приложения реакции. enter image description here Material-ui и firebase auth занимают большой кусок размера. Я следовал за оптимизацией комплекта пользовательского интерфейса, чтобы включить только папку esm, и, кажется, она работает, но я все еще верю, что я смогу сделать лучше. 1,4 МБ для пользовательского интерфейса материала мне кажутся очень важными. : 

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-typescript",
    ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3 }]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "useESModules": true
      }
    ],
    [
      "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
        }
      }
    ]
  ]
}

Вот мой конфиг prod для веб-пакета: 

{
  mode: 'production',
  entry: './src/App.tsx',
  resolve: { extensions: [ '.ts', '.tsx', '.js', 'jsx' ] },
  module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] },
  node: { fs: 'empty' },
  plugins: [
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    HtmlWebpackPlugin { options: [Object] },
    MiniCssExtractPlugin { options: [Object] }
  ],
  output: { filename: 'static/bundle.[hash].js' }
}

Есть ли что-нибудь еще, что я могу сделать для достижения лучшего размера пакета?

...