sonicoder86 / typescript-webpack-tree-shaking

Tree-shaking example with Typescript and Webpack

Tree-shaking example with Typescript and Webpack

This repository shows how to configure Typescript and Webpack to enable tree-shaking. It will eliminate dead code if they have ES2015 module format.

The source code can be found in the app/ folder, where the main file car.js doesn't use all the dependencies from engine.js. The built and transpiled files can be found in the /dist folder.

Webpack only marks unused code at bundling and leaves the removing part to minifiers. This is why all the code is included in development builds in contrary to Rollup.

If you want a more detailed explanation, read this article.

Webpack + Typescript + UglifyJS

Can only remove unused functions and variables.

For development build run npm run webpack (Typescript -> ES5 bundle).

For production build run npm run webpack-prod (Typescript -> ES5 bundle -> UglifyJS).

When transpiling classes with Typescript, it generates an IIFE with an assignment to the prototype. It is considered as a side effect by UglifyJS and it skips removing of it.

See the issues below:

• Webpack issue and a more detailed one
• UglifyJS issue

Webpack + Typescript + Babili

Can remove unused classes, functions and variables.

For development build run npm run webpack-es2015 (Typescript -> ES2015 bundle).

For production build run npm run webpack-es2015-prod (Typescript -> ES2015 bundle -> Babili).

It uses the Babili ES6+ aware minifier and solves the issues what UglifyJS has.

typescript-webpack-tree-shaking's Issues

Question about tree shaking vendor packages

hi,

I am trying this template and using the ES2015 webpack config and it appears to be working for app specific code. For example I edit the car.ts file and try adding and removing references to V6Engine class and this causes the file size to go up and down.
However when I try to import D3, it doesn't appear to be tree shaking functions off that module?
Is there anyway to get this to work?

Question regarding ES5/ES2015

Hey first of all, thanks for putting order into the chaos which is the current state of typescript-treeshaking!

I only have one question.
So the reason the Babili build is only transpiling to ES2015 is because the plugin itself needs ES2015 code to properly analyze dead code?
So in this case if need an ES5 bundle, we'd need to manually (or separately) transpile the bundle into ES5, or is there a way to tell Babili to eventually spit out ES5 code instead of ES2015?

Thanks!!

Question: Why can't Typescript run DCE before transpiling

This may not be the best place to ask this sort of question so I apologize if I'm just mucking up the system here. But I was wondering why can't a parser (like Webpack) run through the original Typescript code and run DCE at that point and then transpile to ES5 or ES6 code?

Question regarding tree shaking

Can you please point out which configurations are necessary for the tree-shaking to work?

Unused React Components not removed by tree shaking

@BlackSonic any idea why tree shaking doesn't work if the class extends React.Component?

Here's a simple reproduction:
cdeutsch@cc37b70#diff-f2a33497e4348acebe5f8fe829ffc6ffR19

Is it a bug with Babel-Minify?

Or are there side effects with extending React.Component?

As you can see V10 shows up in the prod bundle...

Also note, I upgraded your sample to use:

• [email protected]
• [email protected]
• [email protected]
• [email protected]