我正在使用react
和webpack
作为模块捆绑程序编写一个Web应用程序。jsx
到目前为止,我的代码还很轻巧,整个文件夹的大小为25 kb。
我bundle.js
创建的webpack
虽然是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组件,每个组件的大小约为300kb,这是在webpack优化之后进行的。将它们压缩后,它们下降到38kb。仍然相当可观-但这就是我们今天使用明天的功能所获得的。如果您正在使用node / express提供静态资源(包括您的javascript),请查看压缩(https://github.com/expressjs/compression)。我还建议 您查看生产的节点最佳实践指南https://expressjs.com/en/advanced/best-practice-performance.html如果您不是通过节点提供文件,则使用apache(或其他网络服务器)将具有用于压缩基于文本的文件的选项。