英文:
How to determine why something is imported in a Rollup chunk?
问题
问题的内容是,我正在分析为什么我的捆绑包包含了大量未使用的代码。
在截图中,我看到有一个名为chunk-index.es.fbfa066e.js
的块被加载。在加载应用程序后,这个代码的76%是未使用的。
如果我查看这个模块的内容,它基本上捆绑了另外3个包。
// @preserve module @/node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
// @preserve module @/node_modules/.pnpm/immer@9.0.16/node_modules/immer/dist/immer.esm.mjs
// @preserve module @/node_modules/.pnpm/slate@0.87.0/node_modules/slate/dist/index.es.js
然后将它们导出为
export {
Element as E,
Node as N,
Operation as O,
Path as P,
Range as R,
Scrubber as S,
Transforms as T,
Editor as a,
Text as b,
Point as c,
createEditor as d,
isPlainObject as i
};
现在,如果我查看初始化的projects.page.client.f6019eee.js
然而,projects.page.client
内部对这个模块的唯一引用是这个导入:
import "../../../chunk-Table.31bce020.js";
import "../../../chunk-index.es.fbfa066e.js";
import "../../../chunk-Tabs.0cbe576c.js";
也就是说,它甚至没有导入任何命名导出。
- 为什么
projects.page.client.f6019eee.js
中包含了chunk-index.es.fbfa066e.js
的导入?(如何调试这个问题?) - 鉴于它没有导入它的导出,
projects.page.client.f6019eee.js
如何使用它? - 如何告诉[tag:rollupjs]不导入这个块?
英文:
The content of the question is that I am analyzing why does my bundle include a lot of unused code.
In the screenshot, I see that there is a chunk being loaded called chunk-index.es.fbfa066e.js
. 76% of that code is unused after loading the app.
If I look at the contents of this module, it basically bundles 3 other packages.
// @preserve module @/node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
// @preserve module @/node_modules/.pnpm/immer@9.0.16/node_modules/immer/dist/immer.esm.mjs
// @preserve module @/node_modules/.pnpm/slate@0.87.0/node_modules/slate/dist/index.es.js
ane exports them as
export {
Element as E,
Node as N,
Operation as O,
Path as P,
Range as R,
Scrubber as S,
Transforms as T,
Editor as a,
Text as b,
Point as c,
createEditor as d,
isPlainObject as i
};
Now if I look at the initiated projects.page.client.f6019eee.js
However, the only reference to this module inside of projects.page.client
is this import:
import "../../../chunk-Table.31bce020.js";
import "../../../chunk-index.es.fbfa066e.js";
import "../../../chunk-Tabs.0cbe576c.js";
i.e. It does not even import any of the named exports.
-
Why is
chunk-index.es.fbfa066e.js
import included inprojects.page.client.f6019eee.js
? (and how to debug this?) -
How does
projects.page.client.f6019eee.js
use it given that it does not import its exports? -
How do I tell [tag:rollupjs] to not import this chunk?
答案1
得分: 3
以下是翻译好的部分:
- 导入语句在你的入口点中神奇地出现,通常是Rollup的一种无害的加载性能优化。这不会增加死代码的数量,但会“提前引入”那些本来被某个分块的某个依赖项导入的导入语句。详见 https://rollupjs.org/faqs/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting
- 如果在原始源代码中,你使用了大量的重新导出(即人们所谓的“barrel files”),你可能需要考虑将
treeshake.moduleSideEffects
设置为false
,至少对于 barrel 文件来说。否则,Rollup “认为”具有 barrel 文件副作用的所有导入都将成为导入该文件的所有分块的依赖项。或者,不使用这种文件,而直接从声明变量的文件中导入。但有时出于类型原因可能不可行。
英文:
There are several things at play here:
- imports magically appearing in your entry points is usually a—harmless—load performance optimization by Rollup. This will not increase the amount of dead code but "hoists" imports that are otherwise imported by some dependency of that chunk to be loaded earlier, see https://rollupjs.org/faqs/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting
- If in the original sources, you are using a lot of reexport why what people call "barrel files", you may want to look into setting
treeshake.moduleSideEffects
tofalse
, at least for the barrel file. Otherwise, all imports that Rollup "thinks" have side effect of the barrel file will end up as dependencies for all chunks that import that file. Alternatively, do not use such files but directly import from the file that declares the variable. But sometimes that is not possible e.g. for typing reasons.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论