如何最小化webpack包的大小？

Question

我正在使用react和webpack作为模块捆绑程序编写一个Web应用程序。jsx到目前为止，我的代码还很轻巧，整个文件夹的大小为25 kb。

我bundle.js创建的webpack虽然是2.2 mb。使用-p标志运行优化后，它将捆绑包减少到700kb，这仍然非常大。

我调查了react.min.js文件，文件大小为130kb。

Webpack是否可能产生如此大的文件，或者我做错了什么？

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/components/main.jsx',
  output: {
    path: __dirname + "/public",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style!css"
    }]
  }
};

编辑

package.json：

{
  "name": "XChange",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "main": "./bin/www",
  "devDependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "react-dom": "~0.14.3",
    "react": "~0.14.3",
    "webpack": "~1.12.9",
    "babel-loader": "~6.2.0",
    "babel-core": "~6.2.1",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "react-bootstrap": "~0.28.1",
    "material-ui": "~0.14.0-rc1",
    "history": "~1.13.1",
    "react-router": "~1.0.2",
    "style-loader": "~0.13.0",
    "css-loader": "~0.18.0"
  },
  "dependencies": {
    "express-validator": "~2.18.0",
    "mongoose": "~4.2.9",
    "kerberos": "~0.0.17",
    "bcrypt": "~0.8.5"
  }
}

Answer 1

根据您的评论，您正在使用material-ui和react-bootstrap。这些依赖项与您的react和react- dom软件包一起由webpack捆绑在一起。任何时候，您require或import软件包都将其捆绑为捆绑文件的一部分。

这就是我的猜测。您可能正在使用 库 方式导入react-bootstrap和material-ui组件： __

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

这是很好的和方便，但它并不仅仅捆绑Button和FlatButton（和它们的依赖），但 整个 库。

减轻它的一种方法是尝试只import或require需要什么，让我们说一下 组件 方法。使用相同的示例：

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

这只会捆绑Button，FlatButton以及它们各自的依赖关系。但不是整个图书馆。因此，我将尝试摆脱所有 库 导入，而改用 组件 方式。

如果您不使用很多组件，那么它将大大减少捆绑文件的大小。

作为进一步的解释：

当使用 库 方式时，您将导入所有这些react-bootstrap和所有这些material-
ui
组件，无论您实际使用的是哪个组件。