Question

我松散地跟着this link创建我的反应组件以进行分发。我的webpack生成版本如下。

然而，我的构建比我预期的要大得多，因为考虑到单个文件大小的组合大约是大小的十分之一。具体来说，我的文件大小为源js和较少的文件，总和只有1.6kb。然而，在13kb时，构建量增加了约10倍。

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

所以问题是，为什么生产从1.6kb构建气球到13kb？我做错了什么？

MY-柔性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;

（在上面用FlexTableRow或FlexTableCell替换FlexTable，你有我的其他文件）

我的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组件会产生比预期更大的构建

1 个答案: