为什么我的 webpack bundle.js 和 vendor.bundle.js 如此之大? [英] Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
问题描述
我所有的 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?
推荐答案
EDIT
我不确定您使用的是 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.
您必须先在命令提示符下为节点设置此环境变量,然后在 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中echo或mac中list来检查变量是否已经添加.
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 如此之大?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!