如何缩小 webpack 包？答案

【问题标题】：How to minify webpack bundle?如何缩小 webpack 包？
【发布时间】：2016-11-14 06:00:52
【问题描述】：

我创建了一个基于 Webpack 的应用程序。现在我想部署应用程序。这意味着我想创建一个用于生产的 bundle.js。

最好的方法是什么？我已经通过设置参数--optimize-minimize 和-p 进行了尝试。 bundle.js 仍然有将近 2M，这使得网站加载速度非常慢。

我也想摆脱 bundle.js 并用一些 amd 模块替换它。

我的节点依赖项是： "devDependencies": { "babel-core": "6.9.0", "babel-eslint": "5.0.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "bootstrap-loader": "^1.0.10", "bootstrap-webpack": "^0.0.5", "css-loader": "^0.23.1", "eslint": "2.10.2", "eslint-plugin-react": "4.3.0", "exports-loader": "^0.6.3", "expose": "^0.1.4", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "imports-loader": "^0.6.5", "less-loader": "2.2.3", "node-sass": "3.7.0", "react-hot-loader": "^1.3.0", "resolve-url-loader": "^1.4.3", "sass-loader": "^3.2.0", "style-loader": "0.13.1", "url-loader": "^0.5.7", "webpack": "1.13.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react-router": "^2.1.1", "react": "^0.14.7", "react-dom": "^0.14.7", "jquery": "^2.2.2", "less": "^2.6.1", "flux": "^2.1.1", "font-awesome": "^4.5.0", "electron-prebuilt": "^0.36.11", "bootstrap": "^3.3.6", "font-awesome-webpack": "^0.0.4", "fs": "^0.0.2", "react-dropzone": "^3.3.2" }

【问题讨论】：

试试这个webpack.github.io/docs/tutorials/getting-started
这正是我所做的。但不知何故，bundle.js 变得非常大。
使用压缩器并在您的服务器上启用 gzip。

标签： javascript performance webpack integration

【解决方案1】：

如果你想最小化输出包文件的大小，你需要添加一些插件。这两个插件大大减少了大小。

另外，请务必禁用会为包增加一些额外大小的源映射。

您还可以将这些行添加到您的插件配置中：

...
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),
...

这告诉 webpack 你处于生产模式：框架/库之后可能会使用此信息来执行不同的操作（例如禁用日志记录）。

【讨论】：

你的意思是'process.env.NODE_ENV': JSON.stringify('production')，对吧?？ development 在这种情况下几乎什么都不做?

【解决方案2】：

不确定bundle.js 是由什么组成的

如果你还没有尝试过，那么你可以尝试以下这些

分离库和插件文件。这称为bundle splitting

例如你可以输入：

{
    app: PATHS.app,
    vendor: ['jquery','angular']
   }

你也可以看看Setting environment variable

【讨论】：

谢谢，这不是我想要的，但很高兴知道。

【解决方案3】：

Webpack 插件：

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]

【讨论】：

我仍然得到了 1.7MB 的捆绑包。
可能是我必须删除一些依赖项？
不压缩的大小是多少？

【解决方案4】：

bundle.js 变得如此之大，是因为 webpack 包含了所有的图片。为了防止 webpack 这样做，您必须将加载器更改为：

{ test: /\.(jpg|png)$/, loader: 'url?limit=25000', include: PATHS.images }

有关更多信息，请阅读以下内容： http://survivejs.com/webpack/loading-assets/loading-images/

【讨论】：