Реальная стильная таблица стилей - 14 Мб с webpack

Question

Я только что узнал, что моя таблица стилей - 14 МБ, когда я использую библиотеку реактивной эссенции для части пользовательского интерфейса. Webpack также использует навсегда для объединения в начале.

Я только что проверил это с помощью простого приложения для реагирования, в котором я импортирую только кнопку сущности. Таблица стилей выглядит как 7mb. Похоже, что webpack импортирует все вместо деталей.

Мой конфигурационный файл WebPack прост:

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 


module.exports = { 
     devtool: 'eval', 
     entry: [ 
       'webpack-hot-middleware/client', 
       './src/index.jsx' 
     ], 
     output: { 
       path: path.join(__dirname, 'static'), 
       filename: 'bundle.js', 
       publicPath: '/static/' 
     }, 
     plugins: [ 
       new webpack.optimize.OccurenceOrderPlugin(), 
       new ExtractTextPlugin('styles.css', { allChunks: true }), 
       new webpack.HotModuleReplacementPlugin(), 
        new webpack.DefinePlugin({ 
         'process.env':{ 
           'NODE_ENV': JSON.stringify('devolopment') 
         } 
         }) 
       ], 
     module: { 
       loaders: [ 
         { 
           test: /\.(jsx|js)/, 
           loaders: ['react-hot', 'babel'], 
           resolve: ['.js', '.jsx'], 
           exclude: /node_modules/, 
           include: path.join(__dirname, 'src') 
         }, 
         { 
           test: /(\.css|.less)$/, 
           loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'), 
           resolve:['.less', '.css'] 
         }, 
         { 
           test: /\.(otf|eot|svg|ttf|woff)/, 
           loader: 'url-loader' 
         } 
       ] 
     }, 
     resolve: { 
       extensions: ['', '.js', '.json', '.less', '.jsx'] 
     } 
}; 

В чем проблема и как решить эту проблему?

Edit:

Выход WebPack когда кнопка импорта из среагировать-сущности: Link

WebPack, когда импортирование кнопки из сущностного кнопки: Link

Answer 1

В зависимости от вашего импорта Сущность компонента существует 2 варианта:

1. import { Btn } from react-essence импортирует всю Essence css.
2. import Btn from essence-btn будет импортировать только Essence Btn css & Сущность ядра.

Помогите решить эту проблему, если вы можете поделиться своим фрагментом кода, чтобы я мог его протестировать/отладить.