这是我的模块:
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 Shaking
或Dead code elimination
。
如果您不打算使用导入模块中的任何内容,则该模块的源代码将不会包含在您的构建中。
我想create-react-app
使用Webpack
的捆绑。如果您要禁用该功能,则以development
模式启动应用程序可能会解决该问题。顺便说一句,在构建时删除未使用的代码很有好处。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句