The Web Performance Secret: Less Code, More Control
The rise of single-page applications has led to a surge in JavaScript usage, putting a significant strain on browsers. The sheer amount of code being pushed to the browser is a major problem, and parsing it can cause the UI thread to hang. The solution is simple: ship less code. But how do we achieve this without sacrificing features?
Code Splitting: The Answer to Our Prayers
Code splitting allows us to break down our code into smaller chunks that can be loaded on demand. This approach enables us to ship less code without compromising on features. However, it’s a complex process that requires careful management. Thankfully, tools like webpack abstract this complexity behind a simpler API.
Taking Control of Rendering
I believe that more rendering control should be returned to the server. Browsers were not designed to render HTML, and there are many good reasons why server-side rendering is preferable. I predict that we’ll see a shift towards more HTML being rendered server-side.
Dynamic Imports: The Key to Smaller Code Files
Dynamic imports allow us to create smaller code files that can be loaded on demand. The loadable function takes a dynamic import as an argument and handles the heavy lifting for us. Running a webpack build creates several smaller files that can be lazy-loaded.
The Hero of the Piece: loadable-ts-transformer
For TypeScript fans like myself, the loadable-ts-transformer is a game-changer. This transformer allows us to hook into the compilation pipeline and transform code, eliminating the need for Babel.
Configuring Webpack for Code Splitting
To set up code splitting with webpack, we need to define the components that we want to split into smaller chunks using the loadable function. We then need to configure webpack to use the loadable-ts-transformer. This involves creating a common configuration file that’s merged into both the client and server configuration files.
Server-Side Rendering with loadable-components
On the server-side, we need to define an entry point that uses the ChunkExtractor component to collect chunks and create script tags or script elements that can be used in the outputted HTML.
Client Rehydration: The Final Piece of the Puzzle
On the client-side, we need to use the loadableReady function to wait for all scripts to load asynchronously, ensuring optimal performance. This involves setting up the client configuration file to use the loadable-ts-transformer and configuring the entry point to use the loadableReady function.
Epilogue: A New Era of Web Performance
With the loadable-ts-transformer, we can finally take advantage of code splitting without relying on Babel. This opens up new possibilities for web performance optimization. If you’re interested in seeing this feature added to the loadable-component source, be sure to chime in on the issue.
LogRocket: The Ultimate Web Performance Monitoring Solution
LogRocket is a frontend application monitoring solution that provides full visibility into your web and mobile apps. With LogRocket, you can replay problems as if they happened in your own browser, eliminating the need for guesswork or user feedback. Try it for free today!