Looking for real example of js.Build for treeshaking

support
1

Hello,

I use a lot pipes and tailwind/purgeCSS to optimize my CSS. Works beautifully.

I use pipes too for all my javascript. Work fine too.
But as a javascript noob user, I was looking for using the js.Build feature to optimize all this .js.

I read some basics, the Esbuild notice, and obviously the hugo doc & the forum.

But It is not easy for me to understand the right way of using js.Build.

A simple goal would be to bundle/treeshake a huge js framework like bootstrap ou jquery+plugins with my small local scripts using them.

So I would really appreciate if someone has a real life example or links to such beast ?
In case I succeed to understand how it works (don’t hold your breath) I’ll do a simple how-to for next users …

2

So, my understanding (and experience) is that treeshaking comes out of the box, no need to configure it.

Have a look that this.

It uses a date-fns to determine that today is “Saturday”, and I assume that it needs all the code here (I haven’t checked):

https://nifty-curran-a09698.netlify.app/js/main.js

As a side note, I strongly recommend you delegate the minification to ESBuild instread of using Hugo’s minifier.

1 Like
3

OK. thanks. I’ll try this way.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.