React未被使用，但仍被拉入捆绑包

Question

tldr；是什么阻止了React在我的项目中被消除？它没有被使用，除了在我正在使用的库中的一个未使用的实用程序中。

---

我最近创建了一个用于重试失败的动态导入的小库我制作了一个非反应依赖模块和另一个只处理反应细节的模块。这是为了确保消费者在不使用React-utils的情况下不会拉入React。然后我创建了索引模块将这两个参数拉入并导出命名常量

从“./dynamic-import-with-retry”导入_createDynamicImportWithRetry；从“./react-lazy”导入_reactLazy；导出常量reactLazyWithRetry=_reactLazy；export const createDynamicImportWithRetry=_createDynamicImportWithRetry；

这是主要的中的字段package.json包.

我假设根据之前的阅读，当Vite使用此库时，它应该能够收集到仅导入命名导出创建动态导入并重试只需要拉入“./dynamic-import-with-retry”，而不需要另一个导入。不幸的是，情况似乎并非如此：我发布了一个项目这表明情况并非如此：可传递的React依赖项正在被绑定，无论它是否未被使用。

我会假设在捆绑生产期间进行的死代码分析会修剪树的未使用导入。如何确保修剪枯枝？

繁殖：

mkdir tmp-proj&&cd tmp-proj&&mkdir-srcecho'<script type=“module”src=“./src/index.js”></script>'>index.htmlecho“从'@fatso83/retry-dynamic-import'导入*as oo.reactLazyWithRetry（（）=>Promise.resolve（））“>src/index.jsnpm i@fatso83/retry-dynamic-import；非营利组织npx-vite构建vite v4.3.5生产建筑。。。✓ 改造了13个模块。dist/index.html 0.08 kB│gzip:0.09 kBdist/assets/index-4e07d3ed.js 9.27 kB│gzip:3.89 kB

9KB存在问题。它应该接近500字节，但它将所有React生产构建都纳入其中：/

Answer 1

您必须告诉正在使用的bundler，react应该由lib的客户端提供，即它不应该与lib绑定。这叫做外化.

要大致了解如何在package.json和bundler中实现这一点，您可以查看我的使用Rollup的上一个答案。如果使用Vite，则外部化为配置更简单.

Answer 2

我把这个贴在了Vite讨论板事实证明汇总尚无法跟踪分配（根据2023年5月）。

Rollup（目前）无法跟踪赋值，因此我们取消了赋值右侧的所有属性的优化。此外，Rollup去优化不知道执行流，因此它假设lazy可能是require$$0.lazy=（）=>{}中的setter，这就是副作用。可能不太容易修复。

由于Vite依赖Rollup进行绑定，除了将导出移出根模块并将其导出为它自己特定的package.json导出（这就是我为版本2所做的）。