scripts loaded twice

is this normal thing ? In devtools its shows that files loaded twice

my js file:

import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";
import {GUI} from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/libs/lil-gui.module.min.js';

Yes. cdn files contain path to other files. That is why cdn file is 0.6kb
If you want you can change to real path:
import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
to
import * as THREE from "https://cdn.skypack.dev/-/three@v0.129.0-XYKMzgCzb23GRdwfqj2I/dist=es2020,mode=imports,min/optimized/three.js";

In this case it’s a Skypack-specific redirect to a “pinned” build, so your browser should not actually be downloading full files twice. See:

If things were configured wrong (for example loading three.js from one CDN, but then GLTFLoader — which depends on three.js — from a different CDN) you might have full duplicates loaded, and that is problematic. Using a bundler or an import map are the recommended ways to avoid that, but careful management of the CDN URLs should also work.

You can also try switching this to 0.129.0 to align with your other imports…

2 Likes

Instead of this:

import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";
import {GUI} from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/libs/lil-gui.module.min.js';

Do this:

import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";
import {GUI} from 'three/addons/libs/lil-gui.module.min.js';

and add this importmap script to the beginning of your html (before other scripts)

<script type="importmap">
        {
            "imports": {
                "three": "https://cdn.skypack.dev/three@0.136.0/build/three.module.js",
                "three/addons/": "https://cdn.skypack.dev/three@0.136.0/examples/jsm/"
            }
        }
</script>
4 Likes

thanks good man, may God will protect you from evil !

1 Like