scripts loaded twice

Questions
,
1

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';

f79eca237ef33a58befe50d16c4c643d
f79eca237ef33a58befe50d16c4c643d1915Ă—217 23.5 KB

2

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";

image
image858Ă—301 18.3 KB

3

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.

4

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

2 Likes
5

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
6

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

1 Like