为分发创建 React 组件导致构建比预期的大得多

Question

我大致按照 this link 创建了用于分发的反应组件。我的 webpack 生产版本如下。

然而，考虑到单个文件大小的总和约为大小的 1/10，我的构建结果比我预期的要大得多。特别是我的源 js 和 less 文件的文件大小加起来只有 1.6kb。然而，构建在 13kb 时增加了约 10 倍。

我的组件非常简单和相似。我有一个 FlexTable、一个 FlexTableRow 和一个 FlexTableCell 文件。它们都具有与下面相同的签名，但 style.less 不同。在我的 style.less 中，基本上是 css 的几行 display: flex; flex: 0 等等。总而言之，非常少的 js 和非常少量的 css。

那么问题来了，为什么制作会从1.6kb膨胀到13kb？我做错了什么？

我的-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 指向一个索引文件，该文件仅使用 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 是解决包大小问题的好工具。按照那里的说明进行操作，它可能会帮助您了解捆绑了哪些您可能不想要的额外内容。

为分发创建 React 组件导致构建比预期的大得多

Creating React component for distribution results in much larger build than expected

requirejs

reactjs

webpack

umd