Tree Shaking imports

[dennemark]

Hi,
is it still necessary to import like:
import { Mesh } from '@babylonjs/core/Meshes/mesh
instead of
import { Mesh } from '@babylonjs/core'
to get proper reduced file size?

Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

Unfortunately I sometimes have to look up github to find the right import path.
And VSCode only auto-suggests @babylonjs/core on import. So its really annoying

Any recommendations how to deal with it?

[sebavan]

I think you can play with the import settings of vscode for it:

[dennemark]

This seemed to have helped! I used the import Module Specifier option.

[Hanesu]

@dennemark Could you give some more details which option to use for Import Module Specifier? None of the options seem to have any effect in my case.

Shouldn’t I get full import path suggestions?
For any of the options I still just get '@babylonjs/core'.

I use this setup as an example:
https://github.com/h-a-n-n-e-s/thin_instance_pbr

[dennemark]

I wrote it in
.vscode/settings.json

"typescript.preferences.importModuleSpecifierEnding": "auto"

Or you go to vscode settings / workspace settings and search for typescript import:

Sometimes it seems to have issues with other packages, but it works with typescript. Still not optimal, but I think it is better.

[Hanesu]

I see. But his seems to be the default setting (at least in the latest vscode).

Do you get any full path suggestions in the editor?
I don’t.

I just try to get tree shaking to work.
Do I have to change any other settings for that?

[dennemark]

Hm… this is true. Did you try changing the importModuleSpecifier to non-relative? it is different than importModuleSpecifierEnding. I am a bit surprised, that my babylon imports seem to work now although I am using default settings…

[Hanesu]

Yes, I tried non-relative as well.
It always looks like this in the editor

Do I need to change something in tsconfig.json?
It currently looks like this
https://github.com/h-a-n-n-e-s/thin_instance_pbr/blob/main/tsconfig.json

[dennemark]

Not sure
Mine might not work, since its part of a monorepo:

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"

  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "types/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

[Hanesu]

Mmmh, looks similar to mine.

Maybe I should get some Jedi Master involved…

Thanks anyway for your help!

[Hanesu]

@sebavan
Whatever vscode settings I try, I’m not getting it to show me any full import paths. Do you have an idea how to get it working?

[Hanesu]

I figured it out!
If there is an import specifying the base directory '@babylonjs/core' already, there is no full path suggestion.

But if all imports use their specific file, there are full path suggestions.

I couldn’t find any settings that prevent this behavior.
But if one knows it’s fine, I guess.

[dennemark]

I am ending here again Was running into the same issue again on another repo but same vscode settings. ‘@babylonjs/core’ should not be used in ANY file. Only then it works. Thanks a lot @Hanesu !