import statement in typescript

Question

I have 3 different TS file and loading 2 TS file dynamically as below in 1 main TS file

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

Now in both TS file I am importing jquery and also import jquery parent TS file

import * as $ from "jquery"

My 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"]
  }
}

So my question is do jquery file will load 3 times or only once.

Answer 1

Webpack is a bit unpredictable in this case, I'm struggling with it myself , but I don't think it will be loaded multiple times. After the first time it is cached and will be taken from the module cache. The only important thing is that you set the module type in the tsconfig.json to "esnext", what you have done.