Sorry guys, I don’t know how to title this question properly. I have a problem with a syntax checking. It lasts too long for every changing in my .ts files. As for code editors I’ve checked that in: nvim, vscode.
Recently I’ve coded using Phaser3 engine - there syntax checking works immediately, blazingly fast. Yeah I know Phaser3’s size is 4 times smaller: 1mb for Phaser3 vs 4mb for BJS.
I’ve thought the problem with my PC. Yeah I think it definetely could work faster if my PC was much faster than it is, sure. But: the Playgrounds are aslo check syntax not immediately but using some time gap (about 4-7 seconds for simple JS instructions).
I’ve had some success after migrating my projects from: import * as BABYLON from "babylonjs";
to: import { Engine, Scene, ...... } from "babylonjs"
I don’t know if this was the thing that my syntax checker now works faster but I think it’s definitely helped to work faster.
Do you face any problems with slow syntax checking when using BabylonJS?
I think the PC is one think but the size of a project and the toolset is another.
I have pretty small Babylon project, my IDE is VSCode and everything works very fast.
Are you doing only syntax checking or some linting too?
Do you feel like your PC is under pressure? Maybe some other applications are slowing things down.
Can you share you code? Maybe you have some strange things in your tsconfig file
But how to set webpack config to not to include the whole BJS code into bundle? For storing BJS code separately and include it with “babylon.min.js” on my webpage.
I found only one way to do it:
my_app_bundle.js is just usual JS file packed with WebPack, so I get something like this:
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
that’s why I need that global namespace: BABYLON.
So for the developing I use TS and those imports and for the production code I use WebPack to not to include the whole BJS code into my bundle as I use BJS as a separate package.
you are mixing npm packages and normal script tags in your app. If you use an npm package you ned to work with imports and import the classes you need (just like you did in your code). Then you don’t need the script tag and don’t need the global namespace settings.
you are already doing it, and i assume your setup is well prepared for that. meaning - remove the externals, remove the global script, and webpack should take care of the rest.
Well, I tried to do it. If I remove my external then my js-bundle size has ~30mb. Seems like it packs BJS code into one big bundle js-file. I stored it separately for sharing the same BJS code (babylon.min.js) between a few my apps for faster loading. As I think browser can cache babylon.min.js file and load it faster next time.
@Rata_Blanca it all depends on your case and your needs, but…
You do need at least one script tag in your HTML file - you need to load the JS somehow. So it can be just <script src="js/my_app_bundle.js"></script>
~30mb of js file is quite large. You’re talking about developer version (uncompressed)?
I’m having ~11mb of my uncompressed bundle file. (but I’m using Parcel - not Webpack)
What do you have in that bundle?
In general with ES6 you shouldn’t need to use global namespace, you import the babylon and you use that in your source code like you wrote before, eg. import { Scene } from '@babylonjs/core/scene';
The bundling tool should take care of providing the required dependencies in the scope.
As for the browser caching - browser will cache your bundled file too, so it shouldn’t matter much if you have it in two files or in one (there is difference of course, but let’s leave it for now)
Do you use Webpack in production mode? It will minify your bundle, and thanks to the tree-shaking your bundle can be smaller than BJS + YOUR_CODE because you probably don’t need everything from the babylon.min.js.
6.
I stored it separately for sharing the same BJS code (babylon.min.js) between a few my apps for faster loading.
It depends on your architecture, but if you have few applications and you use one Webpack configuration you can share the code between those applications. Not only BJS code, but some utils or whatever you want to
So you can have like one Webpack configuration with few entries and with that shared chunk which will be cached by the browser and reused in every of your app.
If you need some more explanation or any help with any of that you can DM me