How to confirm if tree jitter works with Webpack 2?

Question

I just finished updating my answer application from webpack 1 to webpack 2. However, my package size increased by ~ 30Kb. I was hoping the package size would decrease. How can I confirm that the tree shake worked. And why the increase?

Answer 1

Here are some steps you can take:

• disable mini-configuration / uglify
• insert comments into some of the functions that you know are not used.
• check the output to see if these comments are there or not.

Webpack can also display the size of each import / package module. For example, at work we have a package that includes both lodash and underscore, because each of them uses each of the libraries; webpack clearly shows how many kilobytes each packet adds:

You should be able to see where the increase in size comes from.

Answer 2

TL DR: Starting in version 2.3, there is no tree jitter in webpack. It just uses UglifyJS to remove unused code.

---

First we must determine what the tree is shaking.

• Stackoverflow defines it as "dead code elimination algorithm for modern javascript."

• Webpack explains that it uses the ES2015 module import / export module for the static structure of its modular system.

• Rollup (which originally popularized the term) also has a similar explanation.

Thus, we can deduce a specific definition: a static exception to export unused ES-modules.

Now let's see at what stages of the conversion each module usually has:

• babel-loader is loaded by an entry point, which is a javascript file in some modular format. Babel can either convert it to another module format to leave it as it is ( module: false )
• webpack will statically analyze the file and find the imported modules (using some kind of regular expression)
• webpack will either convert the module format (if Babel does not convert it already) or add some wrappers (for commonjs modules)
• the imported module becomes the entry point and goes to the babel loader
• after all modules are loaded and converted, uglify will process the resulting bit and delete the unused code ( unused: true )

Now we see that although uglify can remove unused exports, it does not actually rely on ES module syntax. This is just an exception to the dead general purpose code, so it cannot be defined as a "tree shake."

So, how can we confirm that webpack has a tree jitter?

• First of all, all code must be in the format of an ES module.
• As mentioned in another answer, we must disable Uglify.
• We must also disable the transformation of the babel module, as we cannot know if the module is being used in this phase.

And now, if webpack really implements the tree jitter algorithm, we can confirm it by looking at the packet size of this entry point:

 import { keyBy } from 'lodash-es'; // lodash is in ES module format console.log(keyBy([{ key: 'value' }], 'key')); 

If the webpack has a tree jitter, the result should be tens of kilobytes. If it is not, it will be half a megabyte or more.