0

このリンクを大まかにたどって、配布用の反応コンポーネントを作成しました。私のwebpackプロダクションビルドは以下です。

しかし、私のビルドは、個々のファイル サイズを合わせたサイズが約 1/10 であることを考えると、予想よりもはるかに大きくなります。具体的には、ソース js とそれ以下のファイルを合わせた私のファイル サイズは、わずか 1.6kb です。ただし、ビルドは 13kb で最大 10 倍です。

私のコンポーネントは非常にシンプルで似ています。FlexTable、FlexTableRow、および FlexTableCell ファイルがあります。それらはすべて、以下と同じ署名を持っていますが、style.less. 私のstyle.less場合、基本的には etc などと言う数行の css ですdisplay: flex; flex: 0。要約すると、非常に最小限の js と非常に少量の css です。

問題は、プロダクション ビルドが 1.6kb から 13kb に膨らむのはなぜですか? 私は何を間違っていますか？

my-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 に置き換えると、他のファイルがあります)

これら 3 つすべてをmodule.exports package.json= {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 に答える