How Discord Boosts Performance With Code-Splitting
#20: Read Now - Fantastic Frontend Engineering (3 minutes)
Get the powerful template to approach system design for FREE on newsletter sign-up:
Discord is a voice and text chat app with 10 million+ daily active users.
This post outlines how Discord code splits to improve performance.
A software bloat is a code that makes the app slower, consumes extra memory, or needs more CPU cycles. A new feature is a software bloat if it has similar problems.
The app is susceptible to feature creep if it serves a diverse marketplace. Yet most users will likely need only a subset of the features. So unused features can be considered bloat.
A simple approach to reduce bloat is through running split tests to identify the most used features. And then removing the unused features.
But the essential complexity of the app is unavoidable. So code split is a potential technique to reduce bloat. The Discord app code splits to maintain performance while adding new features.
The technique of loading code only when needed is called code split.
The Discord app needs code and styles to run. But it takes memory and CPU cycles to parse them. So the server code splits and sends only minimal code and styles needed to run the Discord app. Put another way, code split makes the Discord app faster and consumes less memory.
There are many ways to code split. A good place to start code split is at the app route level. The routes can be bundled into separate chunks using an automation tool like Webpack.
Some web assets that can be code split are:
The code split chunks get lazy-loaded for high performance. The Discord app receives only the relevant translation file through code split. And it allowed them to add many translation files without having a performance impact.
Some benefits of code split are:
Improved performance on mobile clients in an unreliable network
Reduced content delivery network (CDN) costs
Improved search engine optimization (SEO)
The CDN gets charged based on the bandwidth and number of HTTP requests. So it is important to keep a balance between the number of requests and bandwidth consumed.
Yet code split has the following drawbacks:
Overhead due to an increased number of requests
Degraded latency due to many requests
Code splitting via HTTP streaming is a potential solution to avoid overhead and improve latency.
The key takeaway is code split allows adding new features without bloating the app.
Consider subscribing to get simplified case studies delivered straight to your inbox:
Thank you for supporting this newsletter. Consider sharing this post with your friends and get rewards.