我正在使用react和webpack作为模块捆绑程序编写一个Web应用程序。jsx到目前为止,我的代码还很轻巧,整个文件夹的大小为25 kb。
react
webpack
jsx
我bundle.js创建的webpack虽然是2.2 mb。使用-p标志运行优化后,它将捆绑包减少到700kb,这仍然非常大。
bundle.js
-p
我调查了react.min.js文件,文件大小为130kb。
react.min.js
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" } }
根据您的评论,您正在使用material-ui和react-bootstrap。这些依赖项与您的react和react- dom软件包一起由webpack捆绑在一起。任何时候,您require或import软件包都将其捆绑为捆绑文件的一部分。
material-ui
react-bootstrap
react- dom
require
import
这就是我的猜测。您可能正在使用 库 方式导入react-bootstrap和material-ui组件: __
import { Button } from 'react-bootstrap'; import { FlatButton } from 'material-ui';
这是很好的和方便,但它并不仅仅捆绑Button和FlatButton(和它们的依赖),但 整个 库。
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组件,无论您实际使用的是哪个组件。