如何减少 React Leaflet 的包大小？

如何解决如何减少 React Leaflet 的包大小？

我有一个 Gatsby.js 项目，其中我的包的解析大小为 3.92 MB。 1.1 MB 是 leaflet-src.js。 Leaflet 似乎也提供了只有 508 KB 的 leaflet.js。阅读this issue后，每当我导入Leaflet时，我总是导入这个较小的版本，如下所示：

import L from "leaflet/dist/leaflet"

无论如何，每当我运行 Webpack Bundle Analyzer 时，都会导入 leaflet-src.js 和 leaflet.js： Webpack Bundle Analyzer Result

我提到的 GitHub 问题似乎暗示要配置 webpack 以使用优化版本，但我真的很难弄清楚如何做到这一点。

非常感谢任何帮助。

解决方法

所以这可能是 react-leaflet 如何导入传单的问题。虽然从您的代码到传单的任何直接引用都可以使用 import L from "leaflet/dist/leaflet" 选项，但 react-leaflet 源代码和构建代码只是从“传单”导入，并假设您将传单作为对等依赖项。因此，这意味着 react-leaflet 将引入未缩小的版本，如here 所述。

正如 react-leaflet 作者 LeCam 所说，您必须自己管理。您必须找到一种方法来告诉 webpack 将所有对 'leaflet' 模块的引用替换为对 'leaflet/dist/leaflet' 文件的指示。您可以首先查看 webpack 的 redirect an import 问题或 NormalModuleReplacement plugin。

此外，这应该对您自己的代码有所帮助，因为您可以只import L from 'leaflet'，并且如果您正确设置了 webpack，它将重定向到缩小版本。