This is the 17th day of my participation in Gwen Challenge

We know that something called tree-shaking is mentioned in Vue3. Some people call it “Tree shaking”, but it’s not a new thing!

Tree-shaking, as the authors put it, is “pruning” useless modules, so that unused apis are not packaged in the final package

Let’s take a look at what Utah said

One of the biggest and most noticeable differences in VUE3 is that when you use a Bundler, like Webpack or rollup, webpack and rollup are tree shaking. But the premise for tree shaking is that everything must be written with the IMPORT of the ES6 Module

Vue3 still has a global Vue object in the browser, but when you use a Bundler (such as Webpack) it doesn’t have a default export, so you can’t import XXX from Vue and manipulate the Vue as an object. All of these apis have to be imported, and the result is that some functionality that might not be used is shaking off from tree. Things like V-Model and
, if you don’t use them, don’t make it into the final package.

Tree-shaking, to some extent, is also done by the compiler (remember that). For instance,

As you can see, the empty render function imports nothing from vue

But if you add a div

You can see it introduces things like createVNode, openBlock, createBlock. These things are only packaged when you bring things in. By default, however, the minimal restrictions, such as the Virtual DOM update algorithm and responsive systems, will be included in your package anyway. But many commonly used or heavily used functions are only imported when you use them, such as v-Model

As you can see, vModelText, createVNode, withDirectives, openBlock, createBlock are imported from VUE

If the input type is changed to checkBox, vModelCheckbox is introduced

Changing to dynamic type introduces dynamic V-Model, or vModelDynamic

The
component, for example, uses
, and the corresponding transition is introduced

So no if it didn’t work, it wouldn’t be introduced. So things that are not imported can eventually be shaken off by Tree

So, if you just write hello World, the actual size of vue3, the size of the entire application that you end up packing, is 13.5 KB. If you remove support for the 2.0 Option API and so on, the final package is 11.75KB. And all the optional runtime stuff adds up to 22.5 KB. That’s smaller than the entire size of the current VUe2, and it’s on top of a lot of new vuE3 features

That’s treeshaking

In fact, tree-shaking is not something that Vue3 does, it’s something that packaging tools do. It is just Vue3 code structure adjustment. When using webpack and other packaging tools to package a project, Webpack will not pack the unused code into the final project, which makes the project smaller. Main principle: rely on es6 modular syntax, dead-code will be removed!

The test site: vue-template-explorer.net lify.app/