Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can TypeScript output annotations for Closure Compiler?

I'm using TypeScript, and I want to use Closure-Compiler to minify and obfuscate the JS output that I get after building my TS code.

I read that GCC is capable of obfuscating based on type definitions. As far as I can tell (and please correct me if I'm wrong) this means that if I have type annotations on my code then GCC will use them to do a better obfuscation.

For example, for obj.someProp GCC currently finds all instances of the someProp property name in my code, without regarding which object it's on, and replaces all of them to the same obfuscated name (e.g. o.a).
But if I had type annotations on my code GCC would instead be able to know which object is of which type and obfuscate it accordingly - so the same property name on two different types will be obfuscated to two different names.

Questions:

  • Did I understand this correctly?
  • Is "type-safe" obfuscation a good thing?
    I mean, what are the benefits of it? It seems like it would not have an impact on the resulting file size, and might even have a negative impact on the gzipped file size (since there are potentially more different keys across different types).
  • Can I use TypeScript to somehow create the GCC annotations automatically?
    since TS is already type-safe, I believe it is possible, however I'm skeptical that it is a feature. It would probably require knowledge of the TS-compiler internals. Any insights on this?

EDIT

I actually just found this and this. I'll check it out and post an update soon.

like image 731
Malki Avatar asked Feb 04 '15 10:02

Malki


People also ask

In which way can the closure compiler can be used?

In which way can the closure compiler can be used? Explanation: Closure compiler parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. You can use the Closure Compiler as: An open source Java application that you can run from the command line.

Does angular use Closure Compiler?

It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. At ng-conf 2017 the Angular team announced the AOT compiler is compatible with Closure Compiler in Angular 4.

How does Closure compiler work?

The Closure Compiler provides special checks and optimizations for code that uses the Closure Library. In addition, the Closure Compiler service can automatically include Closure Library files. Finding Your Way around Closure describes the syntax for declaring the parts of Closure that you need.

What is Tsickle?

Tsickle is a library, designed to be used by a larger program that interacts with TypeScript and the Closure compiler. Some known clients are: Within Google we use tsickle inside the Bazel build system. That code is published as open source as part of Bazel's nodejs/TypeScript build rules.

What is the Closure compiler's type language?

The Closure Compiler's type language derives from the annotations used by the JSDoc document-generation tool, although over the years it has diverged. This document describes the set of annotations and type expressions that the Closure Compiler understands.

Is it possible to use TSC output in Closure Compiler?

1 Answer 1. Technically, you can take ES6 output from tsc and pipe it immediately to Closure Compiler, as the latter is spec'ed to accept JS as input. We do this already in many places, eg. Angular apps compiled with closure compiler take the rxjs library distribution and include it in the closure bundle.

What is the purpose of the return type annotation?

This annotation allows the compiler to remove calls to the function if the return value is not used. This is not a signal that the function is "pure": it may still read mutable global state.

Is it possible to use ES6 output with Closure Compiler?

Technically, you can take ES6 output from tsc and pipe it immediately to Closure Compiler, as the latter is spec'ed to accept JS as input. We do this already in many places, eg. Angular apps compiled with closure compiler take the rxjs library distribution and include it in the closure bundle.


2 Answers

Update

As of the 20150315 release of Closure-compiler, the type based optimizations are enabled by default.


"use types for optimizations" triggers several compiler optimizations:

  • "disambiguate properties"
  • "ambiguate properties"
  • "inline properties"

Disambiguation occurs early in the optimization process and enables the type unaware optimizations to remove unused properties, devirtualization and other optimizations

Ambiguation occurs just before renaming and is specifically to improve code size by leveraging shorter names and making them more common (which improves gzipping)

Inline properties uses type information to inline properties that wouldn't otherwise be devirtualized. This pass is less effective and thus less interesting to this discussion.

These optimizations are very effective for larger projects but there are some risks involved as there are isn't usually any runtime type enforcement. It is possible to lie about the types in a variety of unintentional ways. I describe the risks in more detail in this project wiki page:

https://github.com/google/closure-compiler/wiki/Type-Based-Property-Renaming

The risks are low but can be mitigated by using the "runtime type check" instrumentation that the compiler supports. If you are trying to retrofit a larger project or having trouble isolating a "bad" disambiguation, look into the "runtime type check"

The TypeScript issue is a separate and should be really be a separate question. Converting TypeScript to the Closure Compiler type system is possible to some extend but there are differences between the TypeScript and Closure Compiler type systems (TypeScript is distinctly unsound and allows many unsafe assignments).

like image 111
John Avatar answered Sep 21 '22 23:09

John


Your understanding is mostly correct. The advantage to type based renaming (which requires the --use_types_for_optimization flag) is that properties that are named the same as any property in an extern are no longer blocked from renaming.

var foo = {};
foo.src = 'test'; //only renameable with type based optimizations

As for typescript, closure-compiler is being modified to understand type-script style type notations. However this project is in the very early stages. The plugins you linked are the best option I know of for now.

The type systems in Typescript and Closure-Compiler are not completely compatible right now. That is also being actively worked on.

like image 42
Chad Killingsworth Avatar answered Sep 22 '22 23:09

Chad Killingsworth