Parcel.js Web Application Bundler: Enabling Tree Shaking for much smaller builds
Feb 16, 2021 00:30 · 186 words · 1 minute read
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
- How-to: Enter your SSH key passphrase only once per terminal session
- Awesome CSS Transitions Tutorial
- Calculating an SSH key fingerprint
- Wagtail: Open Source Django CMS
- Web Development: Overview & Basic Concepts
- Combine & sort multiple csv files ⇒ one csv file
- Improving one's coding skills: Best Practices & Resources
- mysqldump: Dump a single database table to a file
- Tour of Rust
- Restarting a Go app on code change