React：带有冗余导入语句的包大小

Question

我需要了解 Web 和移动应用程序的捆绑包大小在以下情况下会产生怎样的影响。

场景

有 2 个组件 Foo 和 Bar 导入了很少的库。此外，Foo 导入 Bar.

Foo.js


import { Text, Image, Card } from 'design-lib';
import { utilA, utilB } from 'util-lib-1';
import { utilC, utilD } from 'util-lib-2';

import { Bar } from './Bar';

const Foo = () => (
  // JSX
  <Bar />
  // JSX
)

Bar.js


import { Text, Image, Card } from 'design-lib';
import { utilA, utilB } from 'util-lib-1';
import { utilC, utilD } from 'util-lib-2';

export const Bar = () => (
  // JSX
)

关注

这 6 个 import 语句在我看来像是冗余代码。因此，出现以下问题：

这些导入语句真的被认为是冗余代码吗？
或者编译后的代码不会有重复的导入并将代码与所有导入语句和 foo bar 组件合并到一个文件中？
他们会增加网络和移动应用程序的捆绑包大小吗？如果是，什么是使代码模块化的更好方法。我不想将这两个组件保存在一个文件中。

注意： 我知道，如果我导入一个库两次，它的大小不会在最终包中加倍。我担心的是每个导入语句的大小必须只有几个字节。因此，由于这些语句已在不同的文件中写入两次，编译后的应用程序是否会 2 倍每个语句占用的字节数？

Answer 1

Are these import statements really considered as a redundant code?

不，他们告诉代码维护者、工具（如打包器）等模块之间的依赖关系。

Or is it that the compiled code won't have duplicate imports and combine code into single file with all import statements & foo bar components at one place?

这取决于您的捆绑器，但是是的，在多个地方导入的库不会在捆绑包中重复。

Would they increase the bundle size of a web and mobile app?

只有库本身才会包含在捆绑包中（每个库一次），但您可能正在导入它们，因为您使用它们并从它们添加的大小中获益。

注意：有一些方法可以配置可能导致复制的捆绑器，但标准配置不会。事实上，一个好的捆绑器将能够检测您使用和不使用的库的哪些部分，并且如果库的编写是可能的，则可以忽略您不使用的部分。

根据您的更新说：

I know that the size of a lib won't double up in the final bundle if I import it twice. My concern is that each import statement must be having a size of few bytes. So, if write each of these statements twice in different files, the compiled app would have 2x the bytes each statement takes.

你在那里回答了你自己的问题。 “我知道，如果我导入它两次，一个库的大小不会在最终包中加倍。” 是正确的。因此，无论您导入一个库一次还是 20 次，它只会将其大小而不是其大小的 20 倍添加到包中。

React：带有冗余导入语句的包大小

React: Bundle size with redundant import statements

javascript

bundle

reactjs

react-native

redux

场景

关注