Jump to content
GreenSock

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

How to keep GSAP out of uglifyjs / terser mangle in webpack?

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

At the risk of being a little off gsap in this question I'm hoping anybody could help me with this. As I figured I'm probably not the only one having this situation with using gsap and webpack and wanting to mangle during minify.

 

In Webpack I'm using babel to transpile gsap from 'gsap/all'. By imports it also going through the uglifgyjs-webpack-plugin (or uglifyjs-3-webpack-plugin or terser-webpack-plugin) perfectly fine with minifying (I tried all three webpack plugins and they have the same config-interface).

 

I'm using this setup for months now without any problem and I am very satisfied with it, but now I want to mangle my source code and that's a different story. Enabling mangle doesn't throw problems and works, but when I set mangle.properties to true to mangle my properties things are starting to throw errors because the browser can't find things no more. The things it can't find are all inside the gsap lib and other libs like createjs I use.

 

So what I try for days now in all kind of ways is to exclude the libs from the mangling. But so far without success. I tried putting things like 'TweenLite', 'TweenMax' and all in the reserved array (mangle.reserved) of the config object of the minifier (and also in the mangle.properties.reserved), but it doesn't seem to help or I am doing things wrong. I even tried skipping the minifier for the whole node_modules folder with a regEx property of the plugin, but I believe that's not working because uglifgyjs or terser webpack plugin only seem to minify at the very end of the buildflow, so after combining every javascript source into one file. And there seems to be no way to only minify/mangle webpack trunks before that (yet).

 

I also tried using the regex-property inside mangle.properties (mangle.properties.regex) to only mangle properties that are important to mangle. But when I for example put a regex to mangle the property 'settings' it isn't that clever and just seems to replace all properties named 'settings', which could be totally different properties from different objects in my code. So that doesn't seem to be working as wanted or I am missing something perhaps.

 

After days of working on this I'm kind of stuck on how to get this mangle to work. And I would be very surprised if it's not possible to leave libs out of the minifier/uglifier or having them still in but without 'can't find this and that' issues. This seems like a pretty basic workflow to me a lot of developers are probably using. I just think it's hard to believe there's nothing build in the module to get this to work, so I'm sure I'm missing something. How are other developers make mangling work on webpack without the can't find issues, like 'can't find Power4' of used libs?

 

And I also can't find a reason why it can't find things in the mangled output, while the uglify plugin knows all code that is being used, because it's combined by webpack to one single file with everyting in there, all source code, all libs, so all references to objects and properties should be known by the mangler I'd say to mangle without problems. Perhaps webpack is making mangling more difficult, because the webpack output is pretty different, but still, this is a webpack-plugin I'm using, so it should know everything in there... Can't get my head around this.

 

I'm stuck. So I passionately hope anybody here could give me a clue or could share their knowledge on how you guys keep gsap out of the mangle while using webpack 4!

 

Thanks!!

Link to comment
Share on other sites

Howdy @Friebel. Sorry, I'm totally unfamiliar with all that stuff. I wish I could help more, but perhaps someone else will chime in. If you've got any GSAP-specific questions, we'd be happy to address those. 

 

Cheers!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

11 hours ago, GreenSock said:

Howdy @Friebel. Sorry, I'm totally unfamiliar with all that stuff. I wish I could help more, but perhaps someone else will chime in. If you've got any GSAP-specific questions, we'd be happy to address those. 

 

Cheers!

 

Thanks for your response @GreenSock. I appreciate it. Hope anybody else could help me with this!

Link to comment
Share on other sites

Damn... 66 viewer, but nobody here works with webpack together with babel and gsap?? I'm surprised.

 

But wow, this terser mangler is pretty strange (and I'm sure UglifyJs works exactly the same, 'cause it almost seems like an exact copy):

 

It even mangles default DOM-objects and methods like body, getAttribute and all, making the result useless without putting all those keywords in a reserved array. I'm starting to believe no one in the world is using this mangle functionality. 

 

I just can't believe this...

Link to comment
Share on other sites

Have you tried using an earlier version of uglify? I remember that fixing the problem for some other people.

  • Like 2
Link to comment
Share on other sites

14 hours ago, OSUblake said:

Have you tried using an earlier version of uglify? I remember that fixing the problem for some other people.

Thanks @OSUblake. I switched from UglifyJs 2 to 3 and then to Terser to make it work, but I happily switch back if that will do the trick. Any idea on which version is the version I should look for? (and perhaps a webpack plugin that suits that version if you happen to know by chance?). 'Cause it seems to be a real maze when walking through uglify-things (the uglify3 source inside uglify2 repo, that kind of things)

 

I probably don't make it to my next deadline to tryout other uglify versions, but when I find a little more time (maybe in between) I'm eager to try it out and use it for a next project. A version number would be highly appreciated. Thanks again!

Link to comment
Share on other sites

Sorry, I don't know what versions you should look out for. I just remember some people saying that switching to earlier versions fixed some problems, and I'm not even sure if the problem was directly related to mangling.

 

What errors are you getting from GSAP when you mangle it?

 

If I had to guess, I would say the problem is due to how GSAP uses dependency injection, and mangling is messing up the naming of the class names. The variable name should match the "TweenLite" string here. If uglify is changing either, then it probably won't work.

 

var TweenLite = _class("TweenLite", function(target, duration, vars) {
 ...
}

 

 

Minifying Angular 1 code had a similar problem because it also used dependency injection. 

 

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

@OSUblake There happened to be an issue with the terser npm package (just for people that don't know; terser is the 'new' uglifyjs also webpack is using/will be using). That issue is fixed now and helps a lot mangling the webpack bundle. There's still a little issue in mangling some constructions, but the creator of terser now fixed the dom mangle problems and perhaps we can tackle thisone later too so mangling finally works! I would expect a lot of developers are using these functionality, but guess I was wrong.

Thanks for trying to help!

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.
×