I’ve seen plugins that download third-party libraries and load them as local files from /vendor and others that require the library via a CDN.
Is one approach better than the other in terms of bandwidth/speed?
There’s a little bit of a grey area in between the two. You can set up Discourse to serve assets, including theme/plugin JS via a CDN. So, even if your plugin loads the external library in /vendor, it will be loaded from the CDN you configure Discourse to use. However, this is a private CDN.
That said, I don’t think that’s what you’re referring to. You’re referring to services like https://cdnjs.com and https://www.jsdelivr.com, and that’s a slightly different topic - a public CDN.
Services like cdnjs have a wide network of servers that are dedicated to that kind of thing.
So,
They can be faster, and they do help reduce the load on your server.
But… that speed benefit is also available if you use /vendor on a site that has configured Discourse to use a private CDN.
Also, regarding bandwidth, most external JS libraries are < 20Kb. So, while you do get some savings… it’s not really a major point unless your site gets hundreds of thousands of views daily.
One of the benefits of using something like cdnjs is that they serve the same file and have caching headers.
What does that mean? Well, let’s use jQuery, for example.
A lot of sites use jQuery, and a lot of them use cdnjs to deliver jQuery. When cdnjs delivers the jQuery file to the user, it includes caching headers - default to 1 year.
This means that if a user visits site A - which uses cdnjs for jQuery - and then visits site B, which also uses the same file with the same version, their browser won’t have to download jQuery again, since it’s cached - so that leads to faster page loading.
The point above is the biggest advantage to using something like cdnjs for your external libraries.
However, very few libraries are as common as jQuery, so it really depends on how common the library is.
When you load files from cdnjs, you’ll also need to make sure you add them to the CSP settings
So, I guess the answer here is… it depends.
Are you loading the library as is?
Is is common?
Is it on the larger side?
If so, maybe use a cdn. If not, keep it simple and just add it in /vendor
5 Likes
Small update here, Chrome, Safari and Firefox doesn’t work this way anymore. There is no more shared cache between sites:
6 Likes
Can someone please share a link to a plugin that uses the method of adding third-party libraries through either the /vendor folder or a CDN?
I couldn’t find any documentation on it, and I’m having trouble including a third-party library into my plugin, correctly registering it, conforming to the exact folder structure and correctly writing the import statement in the controller files.
Thank you already for the help!
discourse-math might be a good reference - it has a number of ‘vendored’ scripts under the /public directory. Or a simpler example could be discourse-client-performance.
2 Likes