如何最小化webpack的包的大小？
我正在编写一个web应用程序，使用react和webpack作为我的模块webpack器。 到目前为止，我的jsx代码非常轻巧，整个文件夹的大小是25 kb。
我从bundle.js创build的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" } }
根据您的意见，您正在使用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 （及其依赖项），还包括整个库。
减轻它的一种方法是尝试只import或require什么，可以说组件的方式。 使用相同的例子：
import Button from 'react-bootstrap/lib/Button'; import FlatButton from 'material-ui/lib/flat-button';
这将只包含Button ， FlatButton和它们各自的依赖项。 但不是整个图书馆。 所以我会尝试摆脱所有的库导入，而不是使用组件方式。
如果你没有使用大量的组件，那么它应该大大减less你的捆绑文件的大小。
作为进一步解释：
当您使用库方式时，您将导入所有这些react-bootstrap和所有这些material-ui组件，而不pipe您实际使用哪个组件。
01/2017编辑 – 我已经学到了更多关于不同的Webpack插件，并想更新这个。 事实certificate， UglifyJS有一些configuration选项似乎不是非常主stream，但可以对你的包的大小有一个戏剧性的影响。 这是我目前的configuration瓦特/一些注释（文档在网站是伟大的）：
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字符集合化的问题，所以请注意，如果你使用这种转换，就可能出现这种情况。
您可以在webpack文档中阅读关于webpack支持的特定选项的更多信息，以及一些后续链接以进一步阅读。
（旁注：我认为你的package.json是混合的……至less有一些dev-dependencies是我见过的每个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）replace重复代码以最小化文件大小
3）告诉webpack省略一些它用于节点环境构build的东西
最后，如果您使用源图（您可能应该），您将需要添加适当的行。 Sentry写了一篇很好的博客文章 。
在我的构build中，我使用devtool： 'source-map'进行生产
UPDATED 05/18：更新UglifyJsPlugin设置以获得更好的缩小效果
我使用下面的configuration来缩小生产代码。
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 }) ],
你看过你是如何通过networking发送脚本的吗？我有一些非常简单的反应组件，每个组件大约有300kb，这是在webpack优化之后。 他们被压缩后，下降到38kb。 还是可观的 – 但是这就是我们今天使用明天特性所得到的。 如果您使用node / express来提供静态资源（包括您的javascript），请查看压缩（ https://github.com/expressjs/compression ）。 我也build议看生产节点最佳实践指南https://expressjs.com/en/advanced/best-practice-performance.html如果你不通过节点提供文件，然后Apache（或其他networking服务器）将有压缩基于文本的文件的选项。;
