如何最小化webpack捆绑包的大小？
我正在编写一个web应用程序，使用react和webpack作为我的模块捆绑器。到目前为止，我的jsx代码非常轻量级，整个文件夹的大小是25kb。
不过，我用webpack创建的bundle.js是2.2MB。在使用-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"
}
}回答 5
Stack Overflow用户
发布于 2015-12-12 22:48:03
根据您的评论，您正在使用material-ui和react-bootstrap。这些依赖项由webpack与您的react和react-dom包捆绑在一起。任何时候你require或者import一个包，它都会被打包成你的包文件的一部分。
这就是我的猜想。您可能正在使用库的方式导入react-bootstrap和material-ui组件：
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';这很好用，但它不仅捆绑了Button和FlatButton (以及它们的依赖项)，还捆绑了whole库。
缓解它的一种方法是尝试只使用import或require需要的东西，比如说组件方式。使用相同的示例：
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';这将仅捆绑Button、FlatButton和它们各自的依赖项。但不是整个图书馆。所以我会试着去掉你所有的库导入，转而使用组件的方式。
如果你使用的组件不多，那么它应该会大大减少你捆绑的文件的大小。
作为进一步的解释：
当您以库的方式使用时，您导入的是all these react-bootstrap和all these material-ui组件，而不管您实际使用的是哪种组件。
Stack Overflow用户
发布于 2016-03-24 08:19:33
01/2017编辑-从那以后，我对不同的Webpack插件有了更多的了解，并想更新这个插件。事实证明，UglifyJS有一大堆似乎不是很主流的配置选项，但可以对包大小产生戏剧性的影响。这是我当前的配置和一些注释(站点上的文档很棒)：
new webpack.optimize.UglifyJsPlugin({
comments: false, // remove comments
compress: {
unused: true,
dead_code: true, // big one--strip code that will never execute
warnings: false, // good for prod apps so users can't peek behind curtain
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true, // strips console statements
sequences: true,
booleans: true,
}
})我曾经遇到过一个关于转义unicode字符的uglify-ication的模糊问题，所以如果您使用这些转换，那么请注意，这种边缘情况下的事情是可能的。
您可以在webpack docs中阅读有关webpack支持的特定选项的更多信息，还可以通过一些后续链接进一步阅读。
(旁白:我想你的package.json搞错了……在我见过的每个package.json (例如，react-starter-kit)中，至少有几个开发依赖项是依赖项。
如果您正在为生产做准备，那么您应该采取更多的步骤来减小文件大小。这是我的webpack.config.js的一小段：
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],1)缩小/丑化您的代码
2)替换重复代码以最小化文件大小
3)告诉webpack省略一些用于构建节点环境的东西
最后，如果您使用源映射(您可能应该这样做)，则需要添加适当的行。Sentry写了a nice blog post about this。
在我的构建中，我使用devtool：'source-map'进行生产
Stack Overflow用户
发布于 2017-01-03 08:04:46
更新5/18 :更新UglifyJsPlugin设置以获得更好的缩小效果
我在生产代码中使用下面的配置进行缩减。
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production'),
}
}),
new ExtractTextPlugin("bundle.css", {allChunks: false}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0
})
],https://stackoverflow.com/questions/34239731
复制相似问题