cloudflare-workers-and-pages[bot]
commented
1 week ago Deploying atlantis with 
Cloudflare Pages
| Latest commit: |
aebf930
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://712048d2.atlantis.pages.dev |
| Branch Preview URL: | https://scott-t-tree-shaking-atlanti.atlantis.pages.dev |
github-actions[bot]
Motivations
We had a report that we weren't tree shaking properly, and users were getting reduced bundle sizes by using our legacy/compatibility bundles which was not intended (they are there to support legacy usages only).
This PR adds the required configuration to tell Rollup/Vite to properly tree shake our components.
We added
sideEffects: falseto our package.json. This tells bundlers that your code does not 'do' anything when loading the package. It has no side effects from loading the base entry point. Earlier this year we were forcibly injecting styles when loading our components, but we no longer do that (you have to import our styles manually via css) so this is now true!This PR also resulted in a few deep dives into Atlantis. We did two dives, one to see what it would look like to get a pure ESM build with no compatibility layers. The other was a dive to see what it would look like for us to replace rollup with vite in library mode.
In the wake of those dives, we have a list of tasks that can bring down our package size even further. The pure ESM build of Atlantis for instance is 60kb before tree shaking with room for further improvement via bundler configuration.
Screen Shots
These screenshots come from a 'clean' project that I created with Vite. I wanted the absolute bare minimum project to show the difference in sizes for built Atlantis with and without sideEffects on. Note gzip is not enabled, so sizes shown are uncompressed.
Legacy Imports
ESM Imports as of Today
This PR
Build for Prod with existing approach (in sample repo)
Build for Prod with this PR + Prerelease (in sample repo)
Changes can be tested via Pre-release
In Atlantis we use Github's built in pull request reviews.