Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Importing gsap with modules gives big file sizes

Recommended Posts

Hi! It's my first post, I love gsap and until now I could find help just reading other posts. Thank you all for this great forum!

I have a question about library size. I'm importing gsap with ES6 modules and I don't understand why I'm getting big file sizes when the library should be much smaller.

For example import {TweenLite} from 'gsap' gives me +104kb. I'm using webpack to bundle my js.


Thanks for your help!

Link to comment
Share on other sites

It's a little tricky because the current version isn't really built in ES6 modules, thus "gsap" actually points at TweenMax (which contains a bunch of stuff including TweenLite). If you really just want to import TweenLite, do so directly like:


import TweenLite from "gsap/TweenLite";


But remember that if you're trying to animate anything DOM-related (typically CSS), you'll need to also load CSSPlugin ("gsap/CSSPlugin"). 


Also, the size you're seeing is probably uncompressed. TweenMax is under 40k minified and gzipped. Feel free to load it from a CDN instead of bundling it in your JS payload. That's a very popular option. 

  • Like 3
Link to comment
Share on other sites

You can create a file like this.

window.GreenSockGlobals = {};
export const GreenSockGlobals = window.GreenSockGlobals;


Now import GreenSockGlobals, TweenMax, and other GSAP goodies in another file. Now you can export GSAP stuff from that file, and tree-shaking will trim the fat for you. Kind of like what's described here.



  • Like 2
Link to comment
Share on other sites

Great! Thank you a lot! Importing directly only TweenLite gave me +27kb 8-)  OSUblake, what are the benefit of your method compared to simply importing directly the different part of the library?



Link to comment
Share on other sites

I actually forgot to mention a step in my description, but what I was trying to show was a way to eliminate some of the stuff that gets loaded automatically when you import TweenMax. But if you're just importing TweenLite, it won't make a difference.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.