react-dom吹出webpack捆綁大小MASSIVELY

Question

這一直是我遇到的webpack最奇怪的問題之一......

查看此捆綁細分： 反應116.01KB - 足夠公平

react-dom 533.24KB - 認真的WTF

我認為它可能是我的依賴項中的損壞，但nuking node_modules並重新安裝沒有任何影響。 我想這與webpack捆綁它的方式有關，但是我迷失了想法。 我正在處理.js進口的方式是相當的股票標准。

// webpack.config.js
const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');

const dashboard = new Dashboard();

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    bundle: './index.js',
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'file-loader?name=[name].[ext]',
      },
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'postcss-loader',
          ],
        }),
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // new BundleAnalyzerPlugin(),
    new ExtractTextPlugin('styles.css'),
    new DashboardPlugin(dashboard.setData),
  ],
  devServer: {
    quiet: true,
  },
};

// .babelrc
{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": ["transform-object-rest-spread"]
}

Answer 1

http://elijahmanor.com/react-file-size/

在v15.4.0中，react-dom的文件大小從1.17kB增加到619.05kB。 這意味着我的webpack設置沒有做任何錯誤的捆綁文件。 這個模塊變得如此龐大的原因是因為代碼是從react模塊傳輸的。

Answer 2

如果你查看node_modules文件夾下的相應文件夾，並記下文件大小，你會發現沒有什么可驚訝的：

也就是說，bundle的大小明顯增長，因為react-dom.js的大小很大。

Answer 3

在插件中添加以下命令以縮小導入：

new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin(),

您應該為生產包創建一個文件或選項以使用此插件