webpack - Redux 示例 - 包优化

Question

redux 存储库有一组示例。问题是它们用于开发构建，我将它们用作应用程序的模板。

这个特定的示例 - https://github.com/reactjs/redux/blob/master/examples/real-world/webpack.config.js 构建一个 4MB 的 bundle.js。

我试过缩小代码，但我不能缩小包的大小。我究竟做错了什么？

Answer 1

您需要最小化和tree-shake。

一个工作示例可以在redux-auto/example中找到。npm build您可以通过运行@ 0.27MB与 @ 1.16 MB来生成生产包npm start= 节省 420%

redux -auto示例还附带hot-reloading、ES6、React 和 Redux 如果你想使用它作为基础

如果您想在自己的项目中执行此操作，请查看webpack.prod.js和.babelrc

Answer 2

你能判断它是否也捆绑了 React 吗？这将大大增加捆绑包的大小。您可以通过将其添加到 webpack.config.js 来将其从构建中排除：

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

然后，您将通过本地或 CDN 上托管的另一个脚本标签分别提供 React 和 ReactDOM。