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”，您所做的。