ES6模块,什么算作首次导入?

香港

这是我的模块:

console.log("module imported");
export function call(){};

在main.ts中:

import * as mod from './module';

// other code that doesn't use mod.

我希望这会将“模块导入”记录到控制台。实际上,该示例似乎与此示例几乎相同他们说:

导入时仅在第一次时评估模块代码

但是没有控制台日志。但是,在对main.ts进行以下编辑之后,将显示日志消息:

import * as mod from './module';

if(false){
  mod.call();
}

如果仅将模块首次实际使用作为首次导入,则这是有道理的。但是这里的日志消息似乎仅基于静态分析。永远不会执行使用该模块的代码路径。

这是如何运作的?什么算作首次导入ES6模块?

另外,我的直觉还说这可能与捆扎机有关。这样是否可以优化未使用的导入?我正在使用以下代码创建的React应用中运行这些代码段:

npx create-react-app my-app --template typescript
cd my-app
# add the module and import it to index.tsx
npm i
npm run start
# browser opens, check the console

另一方面,typescript react应用程序也具有类似“ ./index.css”的导入,并且它们仅用于捆绑程序将其打包。仅仅出于副作用而导入某些东西似乎很常见。

我已经搜索了相关的问题,但到目前为止尚未找到与此特定问题有关的内容:

这些中的最后一个看起来像重复的,但它与模块解析中的特定语法错误有关。

迪帕克说

您的猜测是正确的,这是由于捆绑器而发生的。它的捆绑程序功能称为“死代码消除”要了解更多信息,请搜索Tree ShakingDead code elimination

如果您不打算使用导入模块中的任何内容,则该模块的源代码将不会包含在您的构建中。

我想create-react-app使用Webpack的捆绑。如果您要禁用该功能,则以development模式启动应用程序可能会解决该问题。顺便说一句,在构建时删除未使用的代码很有好处。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章