javascript - react-dom 极大地增加了 webpack 包的大小

Question

这一定是我遇到过的 webpack 最奇怪的问题之一......

查看此捆绑包细分： react 116.01KB - 足够公平

react-dom 533.24KB - 严重 WTF

我认为这可能是我的依赖项中的损坏，但是对 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夹，并注意文件大小，您会发现没有什么可惊讶的：

也就是说，由于 react-dom.js 的大小很大，bundle 的大小显着增长。

Answer 3

我不得不改变我的webpack.config.js，从

devtool: 'inline-source-map'

至

devtool: 'source-map'

现在它为每个块生成一个小得多的.js + 一个单独的.js.map文件。

请注意，JS 的大小甚至比node_modules中的react-dom.production.min.js还要小：

Answer 4

在插件中添加以下命令以最小化您的导入：

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

您应该为生产包创建一个文件或选项以使用此插件