我所有的React项目的文件大小通常都非常大(bundle.js为4.87 mb,vendor.bundle.js为2.87 mb)。我不知道为什么这么大。我已经启用了uglifyJS,但这似乎没有太大帮助(5.09> 4.87mb和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
{
"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"
}
}
有谁知道如何解决这个问题?
编辑
我不确定您是在Mac / IO还是Windows上,但是我注意到了两点:
1:"deploy": "NODE_ENV=production webpack -p"
看起来不正确,在构建用于开发和部署的变量时必须设置该变量,此处您无需设置。
2:您必须事先在终端/命令提示符下进行设置。
这里有一个Webpack最小化和部署的示例,您必须稍作调整,但是我想这会为您提供帮助。
您必须首先在comand提示符下为节点设置此环境变量,然后在Windows或Mac的终端中将其打开,然后:
Mac: export NODE_ENV=production
Windows: set NODE_ENV=production
您可以在Windows中回显或在Mac中列出以检查是否已添加变量。
然后在您的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中,您可以设置以下脚本:
如果您使用的是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的区别是&&后的空格。
"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"
}
使用comand npm run watch来构建开发,并使用npm run deploy来将其构建为最小版本。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句