Bootstrap Tree shaking issue

This is an experimental repo to show and fix tree shaking issues on Bootstrap. This repository contains two folders with the same project, a simple page with an Alert and some Tooltips:

• tree-shake-issue that shows the current behavior (tree shake is not working)
• fixed that contains a patched version of Bootstrap to make tree shake working

Setup

Go to tree-shake-issue or fixed folder, then run

npm i

and build the whole app using

npm run build

Then you can serve the app on http://localhost:8080 using

npm run serve

If you want to see the behavior of Bootstrap loaded from browser go to http://localhost:8080/trymodules.html.

Results

Inside dist folder for each project you can see the js bundle. As you can see with the command

ls -alh dist/js

you'll get different sizes for the final bundle.

👎 Bundle size without tree shaking (~99K):

➜  tree-shake-issue git:(main) ✗ ls -alh dist/js
total 200
-rw-r--r--  1 andreastagi  staff    99K 27 Dec 15:39 demo.bundle.min.js

👍 Bundle size with tree shaking (~55K):

➜  fixed git:(main) ✗ ls -alh dist/js
total 112
-rw-r--r--  1 andreastagi  staff    55K 27 Dec 16:42 demo.bundle.min.js