Back in September I talked a bit about using a plugin for Rollup – the package bundler we use for Project Dasher – to start optimizing the bundling and delivery of JavaScript code.
Over the last few days I’ve come back to this topic, as I felt it was time to dig into some issues.
Dasher has three primary pages:
- The index page, where you arrive when you visit the site.
- The projects dashboard, which you can access if you have login credentials for the site.
- The Dasher viewer page itself, which most of you will have accessed via the demo link on the index page.
Each of these pages has its own supporting JavaScript bundle, which gets transpiled and bundled from TypeScript source code by our build process.
Until recently these modules weighed in at 2MB, 10.69MB and 10.3MB, respectively. What’s worse is that the main Dasher viewer also included the bundle for the index page – which has significant overlap with the Dasher viewer’s bundle – so there was quite a lot of redundant and unused JavaScript being loaded.
Rollup does a pretty good job of minimising the size of bundles via a process called tree-shaking. This strips out unused code, but I found it doesn’t do well with statements such as “import * from ‘module’;”. I found we’d done this in quite a few places, and more selective use of import helped bring the size down quite a bit. In fact that’s the beauty of the visualization output for the various bundles, in that it often helps us identify which source file is causing a module to be included, but also helps work out whether tweaking an import statement makes a significant change or not.
Anyway, by some iterative tweaking, it was possible to bring the bundle sizes down to 700K, 2.22MB and 9.87MB. So the least impacted was the main viewer page, but then we were able to remove the use of the index bundle, so we stripped off a touch over 2MB. All in all a worthwhile exercise.
Here are some GIFs showing the “before and after” analyses of the bundles for our various pages.
Firstly the index page:
And the projects dashboard:
And the Dasher viewer page:
Given the reduced bundle size, the build process is also quite a bit quicker. Here we are before optimization:
And here we are afterwards:
It was definitely long overdue to do a little spring cleaning on Dasher’s JS bundles – it certainly feels good once it’s done, too!
