Как уменьшить размер reactdom?

Question

[Barring]

При "import ReactDOM from "react-dom";" размер итогового js файла увеличивается ~ на 400кб+.
В некоторых репозиториях гитхаба видел итоговые js файлы размером ~200кб. Возможно ли как-то ужать это всё дело ещё? (на выходе уже и так получаю минифицированный файл, но тем не менее вес его ощутимый)
// Помимо одного маленького компонента, больше нет никакого js кода.

Answer 1

[Антон Спирин]

Видимо, сборку не в production режиме делаете.
react-dom минифицированный - 100кб
react минифицированный - 6кб

А хранить бандлы в репозитории - неправильно.

Comments

[Barring]

К сожалению, в production : "build": "webpack --mode production"
Но тем не менее, как понимаю, подгружается не минифицированная версия.

[Barring]

Антон Спирин, может ли что-либо из этого списка как-то по своему пережимать файлы и не давать нормально сбилдить реактовские библиотеки?

spoiler

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-minify-webpack-plugin": "^0.3.1",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

[Антон Спирин]

Barring, почитайте как правильно production режим задавать.
А вы что конфиг не используете?

[Barring]

Антон Спирин, при webpack --mode=production результат аналогичен. И касаемо конфига, если я всё верно понимаю, то речь относительно webpack.config.js. Он - то у меня есть и для сжатия js там используется babel-minify-webpack-plugin.

[Антон Спирин]

Barring, конфиг свой покажите. Проверьте mode выводом в консоль или через react-dev-tools. Содержимое бандла посмотрите.
Насчет babel-minify-webpack-plugin, не знаю где вы его откапали и не вижу смысла его использовать.

[Barring]

Антон Спирин,

spoiler

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MinifyPlugin = require("babel-minify-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');


module.exports = {

  devServer: {
    overlay: true
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      },
      {
        test: /\.sass$/,
        use: [
          { loader: MiniCssExtractPlugin.loader},
          { loader: 'css-loader?url=false' },
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')
              ]
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css'}),
    new MinifyPlugin(),
    new HtmlWebpackPlugin({
      template : './src/index.html'
    }),
    new CopyPlugin([
      { 
        from: path.join(__dirname, '/src/img'), 
        to: 'img' 
      },
    ])
  ],
  devtool: 'cheap-eval-source-map'
};

И при выводе мода в консоль - выдаёт production.

[Антон Спирин]

Barring, попробуйте подключить webpack-bundle-analyzer
Может ваш маленький компонент тянет за собой большую библиотеку.

[Barring]

Антон Спирин, по итогу получается подобная картина.
react-domproduction-min.js = 400+kb

[Антон Спирин]

Barring, извините за долгий ответ. В Москву летал и отвечал с телефона. Во-первых вы используете cheap-eval-source-map, эта утилита только для dev режима и она сильно увеличивает размер бандла на выходе. Во-вторых попробуйте убрать babel-minify-webpack-plugin. Эта библиотека так же может что-то неправильно оптимизировать.
Еще скиньте .babelrc посмотреть.

[Barring]

Антон Спирин, проблема была в использовании cheap-evap-source-map на проде, спасибо за терпение и помощь.