【发布时间】：2016-03-18 07:43:56
【问题描述】：
我正在编写一个使用react 和webpack 作为我的模块捆绑器的网络应用程序。
到目前为止，我的jsx 代码真的很轻，整个文件夹的大小是 25 kb。
我从webpack 创建的bundle.js 是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"
}
}
【问题讨论】：
-
只有
react和react-dom的依赖项吗？我已经看到一些依赖项拉入节点的某些部分（例如断言），并且可能会变得很大。我不太了解 webpack，但从这里看起来不错。也许尝试只用一个小组件编译一个脚本，没有其他依赖项，然后查看包大小 -
webpack 会将所有依赖项捆绑到您的单个
bundle.js文件中，包括 CSS。除了react和您自己的文件之外，您还需要其他文件吗？您能否在您的package.json文件中发布dependencies部分？你的 CSS 文件有多大？ -
我的 css 文件可以忽略不计，我正在使用
react-bootstrap和material-ui。我不知道 webpack 还会在我的package.json中打包依赖项。我在我的jsx文件中使用import语句来使用这些组件。 @dreyescat -
Webpack 没有在你的
package.json中打包依赖。只是想知道除了react之外还有哪些其他依赖项。但是，如果您使用的是react-bootstrap和material-ui（您需要它们），那么可以。您还将它们打包到您的捆绑文件中。这就是为什么你会得到这么大的文件。