javascript - 如何缩小 webpack 包？

Question

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

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

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

我的节点依赖项是:
“开发依赖项”:{
"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",
"暴露": "^0.1.4",
"extract-text-webpack-plugin": "^1.0.1",
"文件加载器": "^0.8.5",
“导入加载器”:“^0.6.5”，
"less-loader": "2.2.3",
“节点-sass”:“3.7.0”，
"react-hot-loader": "^1.3.0",
"resolve-url-loader": "^1.4.3",
"sass-loader": "^3.2.0",
“样式加载器”:“0.13.1”，
"url-loader": "^0.5.7",
“webpack”:“1.13.0”，
“webpack-dev-server”:“^1.14.1”
},
“依赖项”:{
“ react 路由器”:“^2.1.1”，
“ react ”:“^0.14.7”，
"react-dom": "^0.14.7",
"jquery": "^2.2.2",
“更少”:“^2.6.1”，
“通量”:“^2.1.1”，
" Font Awesome ": "^4.5.0",
"电子预建": "^0.36.11",
"bootstrap": "^3.3.6",
"font-awesome-webpack": "^0.0.4",
"fs": "^0.0.2",
“ react -dropzone”:“^3.3.2”
}


Answer 1

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

• https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
• https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

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

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

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

这告诉 webpack 您处于生产模式:框架/库随后可能会使用此信息来执行不同的操作(例如禁用日志记录)。