时间戳

首页 > 解决方案 > 生产版本太大

javascript - 生产版本太大

问题描述

在我使用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：我也尝试了一些解决方案，它建议排除生成图以减小大小，但我觉得这会减小整体构建大小，但仍然不能单独减小 JS 文件。

标签： javascriptreactjsnginxgzip

解决方案

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

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

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

在这里你可以找到如何实现代码拆分

推荐阅读