问题描述
我的所有React项目的文件大小都非常大（bundle.js是4.87 mb，vendor.bundle.js是2,87 mb）。我不知道为什么这么大。我已经有了uglifyJS，但这似乎没什么帮助（5.09> 4.87mb和2.9> 2.87mb）
All my React projects tend to be incredibly large in file size (bundle.js is 4.87 mb and the vendor.bundle.js is 2,87 mb). I have no idea why it is this large. I already have uglifyJS on, but this doesn't seem to help a lot (5.09 > 4.87mb and 2.9 > 2.87mb)
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
require('es6-promise').polyfill();
var config = {
entry: {
app: [
'./src/entry.jsx'
],
vendor: [
'react',
'lodash',
'superagent'
]
},
output: {
path: './build',
filename: "bundle.js"
},
eslint: {
configFile: './.eslintrc'
},
devtool: 'eval-source-map',
module: {
loaders: [
{ test: /\.(js|jsx)$/, loaders: ['react-hot', 'babel?experimental'], exclude: /node_modules/},
{ test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/},
{ test: /\.json$/, loader: 'json' },
{ test: /\.yml$/, loader: 'json!yaml' },
{ test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}),
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
new webpack.optimize.UglifyJsPlugin({minimize: true}),
new webpack.NoErrorsPlugin()
]
};
module.exports = config;
我的package.json
My package.json
{
"license": "MIT",
"engines": {
"iojs": ">= 1.6.2"
},
"scripts": {
"create:index": "mustang -t index.tmpl -i config.json -o build/index.html",
"predev": "mkdir -p build/ && npm run create:index",
"dev": "webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
"backend": "NODE_ENV=production node server/server.js",
"backend:dev": "DEBUG=tinderlicht node server/server.js",
"predeploy": "mkdir -p build/ && npm run create:index",
"deploy": "NODE_ENV=production webpack -p",
"test": "node webpack-mocha.config.js"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"axios": "^0.7.0",
"babel": "^5.8.23",
"babel-core": "^5.8.25",
"babel-eslint": "^4.1.3",
"babel-loader": "^5.3.2",
"bluebird": "^2.10.2",
"css-loader": "^0.19.0",
"es6-collections": "^0.5.1",
"es6-promise": "^3.0.2",
"eslint": "^1.6.0",
"eslint-loader": "^1.1.0",
"eslint-plugin-react": "^3.5.1",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.1",
"firebase": "^2.3.1",
"fireproof": "^3.0.3",
"jquery": "^2.2.0",
"json-loader": "^0.5.1",
"jsonld": "^0.4.2",
"jsx-loader": "^0.13.2",
"lodash": "^3.3.0",
"mustang": "^0.1.3",
"node-sass": "^3.3.3",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-hot-loader": "^1.1.5",
"sass-loader": "3.0.0",
"style-loader": "^0.12.4",
"superagent": "^1.4.0",
"url-loader": "^0.5.5",
"webpack": "^1.5.3",
"webpack-dev-server": "^1.7.0"
},
"dependencies": {
"body-parser": "^1.15.0",
"cors": "^2.7.1",
"debug": "^2.2.0",
"express": "^4.13.4",
"mustache": "^2.2.1",
"nodemailer": "^2.1.0",
"nodemailer-sendmail-transport": "^1.0.0",
"react-radio-group": "^2.2.0",
"uglifyjs": "^2.4.10"
}
}
有没有人知道如何解决这个问题？
Does anyone have any idea on how to fix this?
推荐答案
编辑
我不确定你是使用Mac / IO还是Windows，但我注意到了两件事：
I'm not sure if you are on Mac/IOs or Windows, but 2 things I noticed:
1：deploy：NODE_ENV = production webpack -p查找不正确，你必须在为开发和部署构建变量时设置变量，这里你没有设置它。
1: "deploy": "NODE_ENV=production webpack -p" does not seens correct, you must set the variable when you 're building it for develop and for deploy and here you are not setting it.
2：您必须先在终端/命令提示下设置它。
2: You have to previously set it on the terminal/comand prompt.
这里举个例子对于webpack缩小和部署，你必须适应一点但我希望这可以帮助你。
Here goes a example for webpack minify and deploy, you have to adapt a little bit but I hp this should help you.
你必须首先设置这个环境变量fo r节点在命令提示符下，在Windows中打开它或在mac中终端：和
You have to set first this enviroment variable for node on comand prompt, open it in windows or terminal in mac and:
Mac: export NODE_ENV=production
Windows: set NODE_ENV=production
您可以在Windows中回显或在mac中列出以检查如果已添加变量。
You can echo in windows or list in mac to check if variable has been added.
然后在您的webpack.config.js中
Then in your webpack.config.js
var PROD = process.env.NODE_ENV == 'production';
var config = {
entry: {
app: [
'./src/entry.jsx'
],
vendor: [
'react',
'lodash',
'superagent'
],
output: {
path: './build',
filename: PROD ? "bundle.min.js" : "bundle.js"
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({minimize: true}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js'),
]:[
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
]
};
在你的package.json中你可以设置这个脚本：
In your package.json you can set this scripts:
如果你在Windows上：
If you are on Windows:
"scripts": {
"dev": "set NODE_ENV=development&&webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
"deploy": "set NODE_ENV=production&&webpack -p"
}
如果您使用的是Mac IOS：
如果导出在这里使用set不起作用，与windows和mac的区别在于&&和
If you are on Mac IOS:If export does not work here use set instead, the difference from windows and mac is the space after &&.
"scripts": {
"dev": "export NODE_ENV=development&& webpack-dev-server --host 0.0.0.0 --hot --progress --colors --content-base build",
"deploy": "export NODE_ENV=production&& webpack -p"
}
使用命令npm run watch在开发中构建，并使用npm run deploy构建它以便在缩小版本中生成。
The use the comand npm run watch to build in development and npm run deploy to build it for production in a minified version.
这篇关于为什么我的webpack bundle.js和vendor.bundle.js如此之大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！