Webpack.js.org: Document tree shaking

[johnstew]

So after doing some research and chatting on twitter with @TheLarkInn I think it might be beneficial to include a guide on tree shaking.

This guide should discuss the following:

• how to use tree shaking in your app
• what exactly tree shaking is
• how webpack v2 handles tree shaking currently

Thoughts?

[rafde]

rollup has a good example

// math.js
// This function isn't used anywhere
export function square ( x ) {
    return x * x;
}

// This function gets included
export function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
}

// main.js
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

result after bundling

function(module, exports, __webpack_require__) {
    // This function gets included
    function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
    }

    console.log( cube( 5 ) ); // 125
}

☮️

[johnstew]

@rafde yeah, I was taking a look at that earlier. However, how webpack handles it is different then rollup and tree shaking is a sought after feature of webpack v2 so I think it might serve the community if we had a section in the guides of how to use it in webpack, what it means, and how webpack handles tree shaking.

[rafde]

I meant for my post to be a quick copy and paste example for

how to use tree shaking in your app.

[johnstew]

ahh okay yeah that makes sense. sorry for confusion

[dmitriid]

Probably not just tree-shaking.

Quoting myself from here: https://github.com/webpack/webpack.js.org/issues/670#issuecomment-274040658

Additionally: a proper release announcement will help with the doc website itself. For example: webpack 2 introduces tree shaking. There is no info on the current documentation site about this feature. It's only mentioned twice in the docs here and here

UPD. With the help of a specific Google search I discovered a link to an external blog post about tree shaking in Webpack 2 on this page

There are undoubtedly other features.

Perhaps reproduce (with permission) the entire blog post from http://www.2ality.com/2015/12/webpack-tree-shaking.html ?

_UPD: sorry for multiple minor edits/fixes to this text_

[johnstew]

@dmitriid I think having something similar to http://www.2ality.com/2015/12/webpack-tree-shaking.html would be good. Some of the info from that post seems to be old.

Should probably take pieces and update with current info for babel.

[simon04]

There's also a nice example in webpack's example collection: https://github.com/webpack/webpack/tree/master/examples/harmony-unused

[simon04]

Documentation added through #781.