在typescript中导入语句

Question

我有3个不同的TS文件，在1个主TS文件中动态加载2个TS文件，如下所示

if(x==='xyz'){
  import('../../common1').then((common)=>{
    common.loadContent()
  })
} else if(x==='abc'){
  import('../../common2').then((common)=>{
    common.loadContent()
  })
}

现在，在这两个TS文件中，我正在导入jquery和jquery父TS文件

import * as $ from "jquery"

我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": ["./node_modules/@types", "./node_modules/@microsoft"],
    "types": ["es6-promise", "webpack-env"],
    "lib": ["es5", "dom", "es2015.collection"]
  }
}

所以我的问题是jquery文件加载3次还是只加载一次。

Answer 1

Webpack在这种情况下有点不可预测，我自己也在纠结它，但我不认为它会被多次加载。在第一次缓存之后，它将从模块缓存中取出。唯一重要的是，您将tsconfig.json中的module类型设置为“esNext”，这就是您所做的。