摇树创建反应应用程序？

Question

我使用 create-react-app and now use TypeScript with create-react-app-typescript 创建了我的 React 应用程序。

一切正常，但问题是 - 特别是因为我使用了很好但很重的 material-ui - 内置包的大小相当大 - 几乎达到 1MB。

如何使用 tree shaking 工具（比如在 Webpack 2 或 rollup 中？我不想 eject 所以好像我真的没有访问 Webpack 配置的权限。

我希望可以对缩小的代码进行 tree shake :)

谢谢！

Answer 1

我们在 create-react-app-typescript 项目中重写了 material-ui 的导入，方法是将它们从以下样式更改为：

import {FloatingActionButton} from "material-ui";

对此：

import FloatingActionButton from "material-ui/FloatingActionButton";

编辑： 这提供了更多背景信息：https://github.com/mui-org/material-ui/issues/11916#issuecomment-401214838

Answer 2

如果您的项目是 uilt with create-react-app，最新版本已修复，只需将 react-scripts 更新到版本 2.0.4 或更高版本。

npm install react-scripts@latest --save

由于更新了依赖项，这个新版本具有出色的 tree shaking。我已经用 material-ui 和 mdi-material-ui.

进行了测试

Tree shaking create-react-app?