Unpkg CDN link sometimes seem to fail

Questions
1

Hi,

My project uses a link to the CDN unpkg to include the Three JS package.
Sometimes my website gives a SSAA error in the debug console (shown below) for the link to the CDN.

Access to script at 'https://unpkg.com/three@0.158.0/examples/jsm/postprocessing/SSAARenderPass.js' from origin 'https://metaalminimaal.be' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I fixed this by adding crossorigin=‘anonymous’ to the script element.

        <script crossorigin='anonymous' type="importmap">
            {
              "imports": {
                "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
                "threeRaw/": "https://unpkg.com/three@0.158.0/"
              }
            }
          </script>

Sometimes the site keeps hanging on the load without an error in the console.
Could this be related to the CDN unpkg load?

2

you can’t rely on cdn’s, they fail, always will. unpkg has a problem (they did have issues recently/currently), your site is down. the hoster should be the only weak link and you often pay for it to have little to no down time.

as per the docs three.js docs

npm create vite
# pick projectName
# pick javascript
cd projectName
npm install three
npm run dev

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
...

everything else can and will come to bite you. but not only that, with what you have above you ship megabytes of unused code and data for no reason since you lack minification and tree-shaking. that one file alone three.module.js is 1.2mb.

you would normally execute

npm run build

and now you can copy the contents of /dist on your server. this is a self reliant application that contains only the (minified) code you’re actually using.

3 Likes
3

In r163 Three.js now uses jsdelivr as CDN instead of unpkg for this very reason, I’d recommend switching to that.

3 Likes
4

The nice thing about importmaps is that it makes switching where you pull from easy, just by changing the importmap it applies to your app globally.

2 Likes
5

Except that external import maps are still not widely supported.

6

Is that true?!

i think only ie11 can’t?

7

External import maps look like this:

<script type="importmap" src="mymaps.json"></script>
2 Likes
8

Oooo! I didn’t know that was a thing!

I just plop them in my html like a barbarian :smiley:

1 Like