0

我已经松散地遵循此链接来创建我的反应组件以进行分发。我的 webpack 生产版本如下。

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

我的组件非常简单和相似。我有一个 FlexTable、一个 FlexTableRow 和一个 FlexTableCell 文件。它们都具有与以下相同的签名，但具有不同的style.less. 在我style.less看来，它基本上是几行 cssdisplay: 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',
      },
    },
  ]
};
4

1 回答 1

1

webpack可视化工具是解决包大小问题的好工具。按照那里的说明进行操作，它可能会帮助您了解捆绑了哪些您可能不想要的额外内容。

于 2016-09-12T20:44:29.437 回答