Parcel.js Web Application Bundler: Enabling Tree Shaking for much smaller builds

Parcel is my go-to asset bundler for small frontend projects consisting of mostly vanilla JS. It is generally zero-configuration and pretty smart about it - I can just install any npm package I want and use it in my code & Parcel will build nice minified JS assets for me. Much easier than Webpack… 😁

One interesting feature I came across: Tree Shaking, which means stripping out code from your dependencies that you do not import. Actually, I assumed Parcel was already doing this by default, but I noticed this when my bundle became >200KB although I was just using one dependency (date-fns), and just using a couple of methods from it.

Tree Shaking in Parcel is experimental, and can be activated by adding the command line argument --experimental-scope-hoisting when running the build command. For more info, see the CLI reference. Although the feature is experimental, it was working without an issue for my small use-case, and it successfully made my JS code shrink from over 200KB to just 10KB. Yeah! 🤩

UPDATE 2021-03-28

Starting with Parcel v2, tree shaking is enabled by default. See https://v2.parceljs.org/getting-started/migration/#--experimental-scope-hoisting