Skip to content
Tree-shaking example with Babel and Webpack
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app initial commit Aug 22, 2016
dist
.babelrc use babel runtime Jun 17, 2017
.gitignore initial commit Aug 22, 2016
favicon.ico
index.html
package.json use babel runtime Jun 17, 2017
readme.md update readme and packages May 1, 2017
webpack.config.js
webpack.es2015.config.js update deps Mar 30, 2017
webpack.es2015.prod.config.js update deps Mar 30, 2017
webpack.prod.config.js update deps Mar 30, 2017

readme.md

Tree-shaking example with Babel and Webpack

devDependency Status

This repository shows how to configure Babel 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 + Babel + UglifyJS

Can only remove unused functions and variables.

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

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

When transpiling classes with Babel, 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 + Babili

Can remove unused classes, functions and variables.

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

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

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

You can’t perform that action at this time.