Is there any performance difference between adding a library via code injection vs. npm install?

Developer help
1

Is there any performance (speed, latency, bandwidth etc.) difference between for example:

  1. In code-injection:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  1. Same as above but in theme file
  2. Installing the libraries with npm install and packaging with npm run zip

What is the “recommended” way?

2

1 and 2 should perform about the same.

I think keeping all key theme code in the theme is cleaner and clearer, though.

I expect option 3 to perform worse because it doesn’t use a CDN.

1 Like
3

3 will use the same CDN the rest of the site is served from though, right?
And it’s fewer external calls (if that’s a concern).

Just use the theme’s gulp.js to grab the relevant files and output them to assets/built as separate js/css files so you can include as needed.