如何减少React Leaflet的捆绑大小？

Question

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

import L from "leaflet/dist/leaflet"

不管怎样，每当我运行Webpack Bundle Analyzer时，都会导入传单src.js和传单.js：Webpack Bundle Analyzer Result

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

任何帮助都将不胜感激。

Answer 1

所以这可能是一个如何反应的问题——传单正在进口传单。虽然从您的代码到传单的任何直接引用都可以使用从"传单/磁盘/传单"选项导入L，但react-传单源和构建代码只是从"传单"导入，假设您有传单作为对等依赖项。所以这意味着反应传单带来了未缩小的版本，正如这里提到的。

正如react传单作者莱康所说，你必须自己处理这件事。您必须找到一种方法，告诉webpack将所有对“传单”模块的引用替换为指向“传单/目录/传单”文件的说明。您可以从使用webpack重定向导入问题或NormalModuleReplacement插件开始。

此外，这对您自己的代码也有帮助，因为您可以从“传单”导入L，如果您正确设置了Web包，它将重定向到缩小版本。