Gsap imports tree shaking reduce bundle size?

[ricky11]

I am importing gsap as so :

 

 const {default : gsap} = import(/* webpackChunkName: "gsap" */ 'gsap/dist/gsap.min.js')

 

this is great because i don't need to load the 60kb gsap build on every load, and only when and if its needed.

The problem however is that I am only using one simple tween function to animate numbers going from 0 to 100.

 

Can I tree shake gsap code to tween only ?  60 kb does seem like a lot for what i am doing?

 

thanks.

 

[OSUblake]

Hi ricky11!

 

You can import just the core for a smaller a bundle. Not sure how big it is, but give this a try. Note that there is no UMD version of it.

 

import { gsap } from "gsap/gsap-core";

 

[GreenSock]

Also, it's not 60kb. It's closer to 20kb gzipped

 

And keep in mind that it only has to load once and then it's "free" on every page thereafter due to caching. You might want to read this:

 

Happy tweening!