Создание компонента React для распределения приводит к значительно большему объему построения, чем ожидалось

Question

Я слабо придерживался this link, чтобы создать свои компоненты для распространения. Моя сборка веб-пакетов ниже.

Однако моя сборка выходит намного больше, чем я ожидал бы от нее, считая, что отдельные размеры файлов объединены где-то около 1/10 размера. В частности, размеры моего файла для файлов js и меньше, в сумме всего 1,6 кбайт. Однако сборка составляет ~ 10 раз больше на 13kb.

Мои компоненты очень просты и похожи. У меня есть FlexTable, FlexTableRow и файл FlexTableCell. Все они имеют ту же подпись, что и ниже, но с другим style.less. В моем style.less это в основном несколько строк css, которые говорят display: flex; flex: 0 и т. Д. Итак, чтобы суммировать, очень минимальные js и минимальное количество css.

Итак, вопрос в том, почему производство создает воздушный шар до 13kb от 1,6kb? Что я делаю не так?

мои-Flex-table.js

var React = require('react'); 

const styles = require('./my-flex-table.less') 

const FlexTable = (props) => (
    <section {...props} className={styles['my-flex-table'] + " " + props.customStyles}>{props.children}</section> 
) 

module.exports = FlexTable; 

(Заменить FlexTable с FlexTableRow или FlexTableCell в выше, и у вас есть мои другие файлы)

Мои package.json указывает на индексный файл, который просто экспортирует все 3 из них с module.exports = {FlexTable, FlexTableCell, FlexTableRow}

производство WebPack скрипт запускается с:

NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js

производство Webpack сценарий

var autoprefixer = require('autoprefixer'); 
var postcssImport = require('postcss-import'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './src/index.jsx', 
    output: { 
    filename: './dist/my-flex-table.js', 
    library: 'MyFlexTable', 
    libraryTarget: 'umd', 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.less'] 
    }, 
    module: { 
    loaders: [ 
     { test: /.jsx?$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      cacheDirectory: true, 
      plugins: ['transform-runtime'], 
      presets: ['es2015', 'stage-0','react'] 
     }, 
     "env": { 
      "production": { 
      "presets": ["react-optimize"] 
      } 
     } 
     }, 
     { test: /.less$/, loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!less-loader' }, 
     { test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/, loader: 'url-loader?limit=100000' } 
    ] 
    }, 
    postcss: function (wp) { 
     return [postcssImport({ 
       addDependencyTo: wp 
     }),autoprefixer]; 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     unused: true, 
     dead_code: true, 
     drop_console: true, 
     warnings: false 
     } 
    }) 

    ], 
    externals: [ 
    { 
     react: { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react', 
     }, 
    }, 
    { 
     'react-dom': { 
     root: 'ReactDOM', 
     commonjs2: 'react-dom', 
     commonjs: 'react-dom', 
     amd: 'react-dom', 
     }, 
    }, 
    ] 
}; 

Answer 1

webpack visualizer является хорошим инструментом для устранения расслоения размеров. Следуйте инструкциям там, и это может помочь вам понять, что добавляется в комплекте, что вы не можете намереваться.