Jump to content
Search Community

Importing gsap with modules gives big file sizes

Eelsie test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

https://github.com/greensock/GreenSock-JS/issues/215#issuecomment-356884140

 

  • Like 2
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 2
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.
×
×
  • Create New...