tldr;是什么阻止了 React 在我的项目中被消除死代码？ 除了我正在使用的库中未使用的实用程序之外，它没有被使用。
我最近创建了a little library for retrying failing dynamic imports 。我制作了一个不依赖于 React 的模块和另一个仅处理 React 细节的模块。这是为了确保消费者在不使用 React utils 的情况下不会拉入 React。然后我创建了an index module将两者拉入并导出命名常量
import _createDynamicImportWithRetry from "./dynamic-import-with-retry";
import _reactLazy from "./react-lazy";
export const reactLazyWithRetry = _reactLazy;
export const createDynamicImportWithRetry = _createDynamicImportWithRetry;
这是 package.json 中的 main 字段。
我从之前的阅读中假设，当 Vite 使用这个库时，它应该能够收集到仅导入命名导出 createDynamicImportWithRetry 只需要引入“./dynamic” -import-with-retry”，而不是其他导入。不幸的是，情况似乎并非如此:我 published a project这表明情况并非如此:传递性 React 依赖项正在被捆绑，无论它是否未使用。
我假设生产捆绑期间的死代码分析会修剪树中未使用的导入。如何确保修剪枯枝？
复制:
mkdir tmp-proj && cd tmp-proj && mkdir src
echo '<script type="module" src="./src/index.js"></script>' > index.html
echo "import * as o from '@fatso83/retry-dynamic-import'
o.reactLazyWithRetry( () => Promise.resolve())" > src/index.js
npm i @fatso83/retry-dynamic-import; npm i vite
npx vite build
vite v4.3.5 building for production...
✓ 13 modules transformed.
dist/index.html 0.08 kB │ gzip: 0.09 kB
dist/assets/index-4e07d3ed.js 9.27 kB │ gzip: 3.89 kB
9KB有问题。它应该接近 500 字节，但它引入了所有 React 生产构建:/
最佳答案
您必须告诉您使用的任何捆绑程序，该 react 应该由您的库的客户端提供，即。它不应该与您的库捆绑在一起。这称为外部化。
要大致了解如何在 package.json 和 bundler 中完成此操作，您可以查看我的 previous answer using Rollup 。如果您使用的是Vite，则外部化为 even simpler to configure .
关于reactjs - React 没有被使用，但仍然被合并到一个包中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76243750/