I am a loyal supporter of vite, with vite development is simply too cool, recently has been using vite, but found a problem, do not know whether there is anyone to help answer the question.

Tree shaking

Vite did Tree shaking, meaning that code that is not used will not be packaged. So I have a question: does ———— mean that WHEN I import UI component libraries, I no longer need to import them as needed?

With this in mind, I did the following experiment. Take element Plus, for example.

Rely on

Experiment 1: Check the packaged volume without importing the component library



Because element Plus was not imported, there is no packaged file of Element Plus.

Experiment 2: Import component libraries only, but don’t use them on the page



Vite did Tree Shaking. As a matter of fact, I haven’t used the components of Element Plus, so it shouldn’t be packaged. But now this is what the package looks like, with a warning that the package is too large.

Does vite not do Tree shaking for UI component libraries?

Experiment 3: Import the component library and use it in the page

After using a few components, the file seems to get a little bigger. Really wrong vite? Did you really do Tree Shaking?

Experiment 4: Change to direct introduction on demand

The size of the file is reduced, as if it were truly imported on demand.

Experiment 5: Use plug-ins to import on demand



With plugins importing on demand, the size of the package is much smaller, and the oversize warning goes away.

The impact of CSS styles?

Has it been suggested that it might be the CSS style? CSS is not introduced on demand, it is introduced globally. So I added a few more experiments, and CSS was all introduced on demand.

Experiment 6: CSS is changed to on-demand, without element Plus and without components



And the volume that we’re packing is the same as in experiment one. Although the CSS file is introduced on demand, the CSS file will not be introduced without element Plus.

Experiment 7: CSS is changed to on-demand introduction, all element Plus is introduced, no components are used



The result is the same as in experiment two, that is, the extra element file. And since only Element Plus was introduced, no components were used, no CSS files were introduced.

Experiment 8: CSS is changed to on-demand introduction, all element Plus is introduced, and components are used

The result is the same as in experiment three. CSS files are introduced, and the size of js files is increased.

Experiment 9: CSS changed to on-demand introduction, on-demand introduction of Element Plus, using components

The result is the same as in experiment 4. And then it repeats.

The experimental conclusion

  1. The bulk of the package is either CSS or element’s JS file.
  2. All are imported, and the file size of the component is used. Is it even smaller than the size of a file that is fully imported but does not use components? !
  3. Imported directly on demand and using components. It will be smaller than all components introduced but not used.
  4. There is a difference between direct on-demand import and on-demand plug-in import. And the volume introduced as needed by plug-ins is smaller.

guess

Vite should not use Tree Shaking for UI component libraries.

doubt

Why all are introduced and use the file volume of the component. Is it even smaller than the size of a file that is fully imported but does not use components? Why is the volume of the package introduced on demand using a plug-in smaller than that of the package directly introduced on demand?

However, there is not much difference in volume between the direct introduction and the total introduction. That is to say, using the direct on-demand approach, it didn’t work!

If anyone knows, please let me know.

The detailed configuration of the plug-in can be seen in my previous article:Element Plus introduces the most elegant uses on demand