生产构建太大

Question

在我使用create-react-app最终生产版本创建的 React应用程序中，出现了 2.3MB 的 JS 文件和 300kb 的 CSS 文件（非常少的 CSS）。

当我运行用于进行构建的命令时npm run build，react-scripts显示正在为生产进行优化构建。

我什至试图用 强制它npm run build --env=production，仍然是相同的未优化输出。

我觉得缺少的是 uglifyjs 并且没有完成 JS 文件的缩小，正如我所见，我的 js 文件不是 min.js。

最终输出还说它已经 gzip 压缩，并且它的大小约为 400kb 的 js 文件，如果是这样，我如何提供我的文件以改进优化。

PS：我也尝试了一些解决方案，其中建议排除 Generation map 以减少 size ，但我觉得减少了整体构建大小，但仍然不是单独的 JS 文件。

Answer 1

如果你确实想要更小的包大小，你可以尝试使用 webpack 进行代码分割。为此，您希望控制您的 webpack 配置，因此您必须弹出您的create-react-app设置。

之后，我们可以配置 webpack，使其使用代码分割。代码分割只是产生多个捆绑包，而不是一大堆代码及其所有依赖项。然后，我们可以仅发送特定页面所需的包，并在后台加载所有剩余的包。

如果正确完成所有这些，可以显着缩短 React 应用程序的初始加载时间。

在这里您可以找到如何实现代码分割