小编典典

如何最小化webpack包的大小?

reactjs

我正在使用reactwebpack作为模块捆绑程序编写一个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"
  }
}

阅读 284

收藏
2020-07-22

共1个答案

小编典典

根据您的评论,您正在使用material-uireact-bootstrap。这些依赖项与您的reactreact- dom软件包一起由webpack捆绑在一起。任何时候,您requireimport软件包都将其捆绑为捆绑文件的一部分。

这就是我的猜测。您可能正在使用 方式导入react-bootstrapmaterial-ui组件: __

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

这是很好的和方便,但它并不仅仅捆绑ButtonFlatButton(和它们的依赖),但 整个 库。

减轻它的一种方法是尝试只importrequire需要什么,让我们说一下 组件 方法。使用相同的示例:

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

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

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

作为进一步的解释:

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

2020-07-22