10 Web Performance Audit Tips for Your Next Billion Users in 2018: Bundle Splitting, Deferred Loading and Prefetching

Celý článek

Since the advent of module bundling, we thought all our asset request got solved because the bundler hands us a single bundle that represents everything. We just shove this bundle right into our app and that’s all. No that’s not all.

If your app falls in the medium or large scale size, then you might be attempting to shoot yourself on the foot. Yes, bundling is a great strategy but what happens when this download size is huge and in thousands of kilobytes. The user will have to wait for the download to complete before parsing will even start.

You can use the following strategies to effectively manage bundles in your apps:

Bundle splitting

When building a single page app with JavaScript routes, you can split each route’s code into a different file. So for each route, you serve a global JS that is common to all routes and then another route script that is unique to that route. Usually, we would bundle everything and serve it once but then some pages are rarely visited. The code powering these rarely visited routes can end up useless for a user yet they bear the weight. This is why you should split.

Deferred Loading

When you split a bundle based on the routes, you can now load only what the immediately visited page needs. Then you can load the other routes code when the routes are visited.

Prefetching

Instead of waiting for the user to move from home to about before loading about’s code, you can prefetch about’s code while the user is still on the index route. This is referred to as prefetching. When he/she attempts to visit the about route, the route will load much faster because the code that controls it has already been fetched.

Tools and Resources

• PRPL Pattern
• Lazy Loading Routes in React