Best practice to get rid of external js dependencies and use internal files instead?

support
1

I decided to use Academic for my project. After spending some time and configuring it to my liking I realized there are at least 7 external js dependencies that I have to count on, in order for my site to work properly. Hosting js dependencies externally makes me feel so insecure delivering this project to my client.
I don’t want to depend on external services that might be blocked in certain countries or/and all the other reasons why external dependencies are bad.

I realize I can store and serve all dependencies internally, but I’m not sure what’s the best way to approach it.
What is the best way of doing this with Hugo and Academic theme?

So far I have identified the following dependencies that my configuration is using:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js
https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js
https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js

I know, it’s crazy, haha.

Hugo version

Hugo Static Site Generator v0.54.0/extended windows/amd64 BuildDate: unknown
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.11.5"

Academic version 4.1

Thanks!

2

Also search the forum as there are many useful posts about concatenating various JS files.

1 Like
3

Thanks!
Those are some powerful tools.
Time to learn something new.
I guess I’ll need to figure out how to bundle and minify those external assets with Pipes.

4

There is also an admin tool for Academic that can be used to generate offline (non-CDN) sites: https://github.com/sourcethemes/academic-admin . Note that there are some open issues in the repo for that tool which may affect you, depending on which assets your site is using.

1 Like
6

Finally got to play with academic-admit tool.
It works, but…
Total size of imported JS and CSS assets (minified) is almost 1.2 MB!
It’s obviously unusable for live website, too large.

7

After a closer look on Hugo Pipes, do I understand correctly that I need to do some heavy theme editing in order import external JS/CSS with Hugo Pipes?
I’m pretty new to all this :sweat_smile:

8

If you are using the same library before and after, it is not so hard to edit the theme to support it.

1 Like
9

I migrated a site to start using Pipes, and it took a half day but wasn’t hard. I just followed the various docs and went step by step. I am not using a theme though. Just using Tachyons, and no javascript in this case.

1 Like
11

IMHO, js dependencies should be kept to a minimum and what ever is being depending on should be included on the theme.

Moreover, Hugo’s pipelining, concatenating and fingerprinting are awesome features complementing this thought.

13

There appears to be a misunderstanding.

Academic is actually a framework rather than just a theme. The JS requirements are not hardcoded into the code, rather they are dynamic and depend on which features the site owner chooses to activate. When using Academic with CDNJS, only assets for the features that the site owner activated will be loaded.

Thus, it’s up to the site owner to choose how simple or complex their site will be in terms of third-party integrations and assets.