Шаг 1

По умолчанию при импорте библиотеки будут импортированы все компоненты. Если вы используете webpack 1, вы можете следовать инструкциям, приведенным здесь в разделе использования для сборщиков:

http://react.semantic-ui.com/usage#bundlers

Пример конфигурации показывает, как вы можете использовать babel-plugin-lodash (несмотря на название) для автоматического преобразования ваших операторов импорта в импорт отдельных компонентов. Явный импорт отдельных компонентов гарантирует, что вы объединяете только те компоненты, которые используете. Неиспользуемые компоненты не будут включены в ваш комплект.

Шаг 2

Каждый компонент включает определение propTypes. Они полезны только в развитии. Они также довольно большие и многословные. Мы обертываем наши определения типов свойств, чтобы они автоматически удалялись во время минимизации с устранением неработающего кода, при условии, что для process.env.NODE_ENV установлено значение «производство» и оно отображается как глобальное.

Вы уже должны это делать, так как это требуется для реакции на пакет в производственном режиме. На всякий случай вот инструкции, как это сделать: Как включить/выключить «режим разработки» ReactJS?

Удаление определений типов опор сэкономит дополнительное место.

Шаг 3

Поскольку исходный код сокращен так, чтобы он включал только те компоненты, которые вы используете, а эти компоненты сокращены только до производственного кода, теперь вам следует минимизировать и сжать пакет.

Проверьте документацию по веб-пакету, чтобы включить производство, так как это уменьшит ваш код и использует устранение мертвого кода, это очень просто. Затем вы можете сжать пакет с помощью: https://github.com/webpack-contrib/compression-webpack-plugin.

Заключение

С тех пор, как я это сделал, в библиотеку были внесены некоторые обновления, но я достиг 81,8 КБ для всей библиотеки в формате UMD, что требует немного больших накладных расходов.

Здесь PR показывает полную настройку: https://github.com/webpack-contrib/compression-webpack-plugin

Статистика здесь: https://github.com/Semantic-Org/Semantic-UI-React/blob/3aa72bc76aac05c526e2b14a6ed4687995cd11af/stats-library.md

Поскольку существуют некоторые проблемы с Webpack 2, поэтому он не поддерживает tree shaking для оптимизации импорта, я временно используя приведенную ниже настройку для решения проблемы:

webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new webpack.optimize.UglifyJsPlugin(), // Minify everything
  new webpack.optimize.AggressiveMergingPlugin() // Merge chunks
]

.babelrc

  "plugins": [
    "transform-react-jsx",
    [
      "lodash",
      {
        "id": [
          "lodash",
          "semantic-ui-react"
        ]
      }
    ]
  ]

В машинописном тексте при ориентации на es5 приведенные выше рецепты не работают (поскольку в этом случае он не соответствует модульной системе es).

Вы можете создать файл, который будет извлекать все модули semantic-ui-react, которые вы используете, один за другим, и реэкспортировать их. Чем в своем коде вы просто приносите модули из вспомогательного файла, а не из самой библиотеки.

Так:

import Button = require('semantic-ui-react/dist/es/elements/Button');
import Icon = require('semantic-ui-react/dist/es/elements/Icon');
import Image = require('semantic-ui-react/dist/es/elements/Image');
import Input = require('semantic-ui-react/dist/es/elements/Input');
import Label = require('semantic-ui-react/dist/es/elements/Label');

import Form = require('semantic-ui-react/dist/es/collections/Form');
import Menu = require('semantic-ui-react/dist/es/collections/Menu');
import Message = require('semantic-ui-react/dist/es/collections/Message');
import Table = require('semantic-ui-react/dist/es/collections/Table');

import Checkbox = require('semantic-ui-react/dist/es/modules/Checkbox');
import Dropdown = require('semantic-ui-react/dist/es/modules/Dropdown');
import Modal = require('semantic-ui-react/dist/es/modules/Modal');

import Confirm = require('semantic-ui-react/dist/es/addons/Confirm');
import TextArea = require('semantic-ui-react/dist/es/addons/TextArea');

import { DropdownItemProps, CheckboxProps, InputProps,
  MenuItemProps, ModalProps, TextAreaProps } from 'semantic-ui-react/index.d';


export { Button, Dropdown, Confirm, Icon, Input, Modal, Label,
  Table, Checkbox, TextArea, Form, Menu, Image, Message };
export { DropdownItemProps, CheckboxProps, InputProps, MenuItemProps, ModalProps, TextAreaProps };