React-DOM极大地增加了Webpack打包大小

Question

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

看看这个bundle文件的细节： react 116.01KB - 还可以接受 react-dom 533.24KB - 真的是什么鬼

我以为可能是依赖关系出了问题，但是删除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"]
}

- Toby Flemming

Answer 1

在v15.4.0中，react-dom的文件大小从1.17kB增长到了619.05kB。这意味着我的webpack设置在打包文件时没有做错什么。这个模块之所以变得如此庞大是因为代码从react模块转移到了这里。详情请见：http://elijahmanor.com/react-file-size/。

- Toby Flemming

---

列出的值是开发包大小。通常会发布生产或最小化版本，可能还会使用gzip，因此react.min.js.gz + react-dom.min.js.gz <50kb。在webpack构建中使用“mode”：“production”（现在是webpack的默认设置）将生成这些预期较小的包大小。 - Colin D

Answer 2

我不得不更改我的webpack.config.js，从中

devtool: 'inline-source-map'

到

devtool: 'source-map'

现在它会为每个块生成一个更小的.js文件和一个单独的.js.map文件。

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

- Victor Zakharov

Answer 3

如果你查看node_modules文件夹下对应的文件夹并注意文件大小，你会发现没有什么好惊讶的：也就是说，打包的大小增加了明显是因为react-dom.js文件很大。

- m1kael

---

我有一个旧项目，使用的是react-dom@15.3.2版本，大小只有1KB... 是什么导致了这样大的跳跃？ - Toby Flemming

react-dom@15.3.2 只是在链接 react 包。 - Gajus

Answer 4

将以下命令添加到插件以缩小导入文件大小：

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

您应该创建一个文件或选项来生成捆绑包以使用这些插件。

- Alessander França

---

我知道我的捆绑包可以压缩。 我担心的是相对于React的react-dom大小...在生产模式下，我的捆绑包变小了，但react-dom仍然不对。 - Toby Flemming

我曾经遇到类似的问题并通过使用这些插件进行了解决，在生产环境下，react-dom 的大小达到了30k。为了解决在生产环境中我的2MB压缩捆绑包的问题，我使用了路由代码拆分。 - Alessander França

我正在使用Webpack 2。当你运行webpack -p时，它默认使用OccurrenceOrderPlugin和UglifyJsPlugin。 - Toby Flemming

我也在使用Webpack 2。当我为这些插件更改-p时，我的捆绑包从8MB减少到2MB。 - Alessander França

插件对我没有任何作用... - Toby Flemming

Terser 在压缩方面比uglify更出色。使用terser-webpack-plugin。 - vsync