Repository files navigation

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 theapp/ folder,where the main filecar.js doesn't use all the dependencies fromengine.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.

Can only remove unused functions and variables.

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

For production build runnpm 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 amore detailed one
• UglifyJS issue

Can remove unused classes, functions and variables.

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

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

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