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

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

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

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

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.

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

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

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

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

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"
  },

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

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

Как дождаться выполнения append?

Ihor Bratukh, без jquery вариант более понятен.
Мой отрывок кода выглядит следующим образом и как я понимаю то дабы обойтись без использования промисов (что явно не есть хорошо), то можно просто добавить какой-то обработчик на событие onerror дабы отлавливать ошибки при загрузке в случае чего и всё будет корректно работать:

let xhr = new XMLHttpRequest;
  xhr.open('GET', link, true);
  xhr.send();
  xhr.onload = () => {
    let response = JSON.parse(xhr.responseText);
    response['data'].forEach( elem => {
      let img = document.createElement('img');
      img.src = elem['images']['480w_still']['url'];
      img.style.width = '100%';
      img.onload = () => addGifs(img);
    })
  }

  function addGifs(img) {
    let minIndex = 0;
    let columnsHeight = options.columns.map( column => {
      return column.offsetHeight;
    });
    console.log(columnsHeight, minIndex);
    for (let i = 0; i < columnsHeight.length; i++) {
      if (columnsHeight[minIndex] > columnsHeight[i]) {
        minIndex = i;
      }
    }
    options.columns[minIndex].append(img);
    }

Как дождаться выполнения append?

С синтаксисом jquery, к сожалению, не знаком.
В моём варианте у меня изначально просто задаются необходимые свойства для img, указывается тот самый, злосчастный src и потом при img.onload уже идёт append.
img.onload = () => addGifs(img);

Что находится "под капотом" у ES 6 модуля?

Алексей Тен, то есть раньше как-то адекватно разбивать код на отдельные файлы возможности не предоставлялось? (вариант с отдельным подключением каждого отдельного файла явно не самый удобный)

Как динамически подгружать контент?

Спасибо, я просто не особо внимательно по документации пробежался. Параметр offset есть и доступен для использования)

Как изменить отображение страницы без перезагрузки?

Здесь всё же по итогу проблема находится в том, что код, используемый мною, видимо не является верным. Ибо, без воздействия js - при смещении текста в отладчике изменяется высота блока с текстом (только одного). А при работе js - до обновления страницы никаких изменений не происходит.

Как изменить отображение страницы без перезагрузки?

Мне необходимо что бы высота всех блоков одного класса была одинакова. И если из-за сноса текста изменяется высота какого-то блока - для всех остальных задаётся эта самая высота.

Как изменить отображение страницы без перезагрузки?

Dima Polos, при уменьшении ширины блока, текст смещается вниз, в следствии этого и высота блока тоже увеличивается.