8

I have set up webpack 2 with angular and mostly it seems to work. It does not seem though that it does the tree-shaking, since I have an app that does almost nothing, and the vendor.js is still 800+ KB.

It seems there is very little information available on how to turn the tree-shaking on, but what I understood that it's automatically turned on for ES6 modules, but does not work for ES5. Is that so?

And most importantly: How can I apply tree-shaking to typescript/angular2 with webpack2?

Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
  • Yes, it shouldn't work for CJS modules (there are no ES5 modules), and it should for ES6 modules. Since this is primarily a Webpack question, a repo that replicates the issue would help. [There may be problems with tree-shaking transpiled TS classes](https://github.com/mishoo/UglifyJS2/issues/1261). – Estus Flask Nov 13 '16 at 13:55
  • @estus well, maybe it even works, but I did not turn on anything on purpose. Is there any easy way to check if it works? – Ilya Chernomordik Nov 13 '16 at 14:14
  • Check for the existence of some unused class in minified JS output. – Estus Flask Nov 13 '16 at 14:32
  • Just did, it is still there. Seems because of the bug you mentioned. Does that mean we can't really run "es5" for now? And what would "es2015" mean: it won't work in many browsers or it does not matter since webpack will take care of the real module loading anyway? – Ilya Chernomordik Nov 13 '16 at 14:33
  • The suggested workflow is to transpile TS to ES6, then to transpile ES6 to ES5 via Babel (with possibly Babili minifier between those two). Haven't had chance to test this solution thoroughly by myself. – Estus Flask Nov 13 '16 at 14:38
  • This all seems rather complicated workflow :) I guess I'll wait till the bug is fixed or until es6 is working, hard to tell really which comes first – Ilya Chernomordik Nov 13 '16 at 14:50
  • 1
    @estus I have managed to run it with "es2015" and minify with `babili` and it did in fact remove the exported class I did not import, but the most interesting thing was: `vendor.js` file got even bigger! It seems this stuff is all quite "beta" :) – Ilya Chernomordik Nov 13 '16 at 15:08
  • Sure, it is in beta. ES6 output can hardly be called practical for client side app. – Estus Flask Nov 13 '16 at 15:40

1 Answers1

4

I have found this very nice repository with examples on how to do this.

As mentioned in there and in the comments to the question, there are apparently bugs that prevent the tree-shaking from happening. That seems to mean it's not really possible to do now with "target": "es5".

We can use es2015, but then we'll need some additional steps (e.g. via Babel) to compile to es5 until browsers support it.

Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
  • 1
    Why would you need Babel to transpile back to `es5`? AFAIK TypeScript has a `target` setting in the config which tells it to what version it will be transpiled. – tftd Aug 01 '17 at 06:26
  • It does, but at least at the time of writing it did generate code that was not good enough to do tree shaking. Don't remember much details, and maybe it is better now as well. – Ilya Chernomordik Aug 01 '17 at 06:35
  • Thanks for replying! I'm currently struggling with making it work as well. It seems this is a big headache to get it to work... :) – tftd Aug 01 '17 at 06:39