Combining GSAP source files into one file

[emilychews 19 Likes (Newbie)]

Hi

 

If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests?

If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file?  At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously)

Or is this just a bad idea all round?

Emily

[PointC 14,170 Likes (Superhero)]

You could do that, but I'd recommend a CDN so you'll get the benefit of caching. You could use a CDN for TweenMax and the CSSRule plugin since they are not Club bonus files. DrawSVG is a Club member plugin so there isn't a CDN. You'll have to host that one yourself. More Club info:

 

https://greensock.com/club

 

Happy tweening.

[OSUblake 18,472 Likes (Superhero)]

Using a CDN is good choice. All your other scripts can be concatenated and minified into a single bundle/file.  I don't want to get into the details, but there a lot of tools that will automate this process for you, like Gulp and Webpack. Just search around. 

[Carl 11,094 Likes (Superhero)]

I learned from Blake, that jsDelivr will provide combined, CDN-hosted files for you. So if you want a file with TweenMax and CSSRulePlugin the link would be:

 

https://cdn.jsdelivr.net/g/gsap@1.19.1(TweenMax.min.js+plugins/CSSRulePlugin.min.js) 

 

If you want to host the files yourself you could just click on that link and grab the source.

You won't find members-only plugins there like DrawSVG though.

 

You can build your own GSAP bundle here: https://www.jsdelivr.com/?query=gsap (it seems they are little stale with only having version 1.19.1)

 

As Blake mentioned above, using a CDN is really the best route as TweenMax from the cloudfare cdn is used so pervasively across the web (websites and ads) that there is a ridiculously high likely hood that it is already cached in the user's browser. 

 

 

 

[OSUblake 18,472 Likes (Superhero)]

You may need to send a PR to jsDelivr if it's out of date. Sometimes the auto-updating can break.

 

You see it's up to date on GitHub

https://cdn.jsdelivr.net/gh/greensock/greensock-js@1.20.2/src/uncompressed/

 

and NPM

https://cdn.jsdelivr.net/npm/gsap/

[emilychews 19 Likes (Newbie)]

Thanks that was all really useful info.

Emily.