reactjs - create-react-app减少构建大小: main. [hash] .chunk.js是3MB +，其中大部分是图片

Question

我使用 yarn build 构建我的应用程序。

它生成一个 3.27MB 的 build\static\js\main.8dc5bf7f.chunk.js 文件:

3.27 MB   build\static\js\main.8dc5bf7f.chunk.js
82.79 KB  build\static\js\2.61d04f1f.chunk.js
2 KB      build\static\css\main.275d97bd.chunk.css
1.93 KB   build\static\css\2.8380becc.chunk.css
768 B     build\static\js\runtime~main.848c2454.js

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting
You can also analyze the project dependencies

我使用 source-map-explorer 来分析文件，它显示:



因此该文件包含我整个应用程序的所有图像。

但有趣的是，构建仍然有一个 static/media 目录，其中包含所有 .png 格式的图像。显然该应用程序仍然加载这些 png 文件以显示图像。

那么js文件中的那些东西是什么？我想知道它们是否甚至被使用过？

请:

向我解释为什么我的整个应用程序中的所有图像都包含在我的逻辑 javascript 文件中。

有没有办法删除它们？我需要增加页面负载。初始加载时 4MB 令人难以置信。

Answer 1

基本上，您在应用程序中使用 import 并将其与 webpack 捆绑在一起的任何内容都将被视为依赖项。

所以:import img from path/to/img 将使它成为一个依赖项，因此，包含在你的包中，这就是你想要逃避的。

有两种可能的方案可以解决此问题:

停止导入图像，使它们可用/托管在 CDN 中，例如 AWS S3。

应用 Move Statics Out 方法，即将静态文件的所有目录从包中移出，使它们在静态相关文件夹中可用并开始使用相对链接，我建议 copy-webpack-plugin 。

对我来说，我会选择 1。