How can you improve your web application's performance with code splitting?

Code splitting is a technique used in web development to optimize the loading of web applications by splitting the codebase into smaller, more manageable chunks. The idea is to load only the code that is necessary for the current page or feature, rather than sending the entire application code to the user's browser all at once. This can significantly improve page load times and overall performance

An example I've built a ATM management system which has thousands of data and be used by employees, vendors, managing the whole lifecycle from acquisition, rent, maintenance, and termination. It has hundreds of page components. We implement it and voila! The user don't need to load the whole app bundle anymore.

Where code splitting has many benefits for larger codebases, it can easily become an anti-pattern when used for those smaller or much smaller codebases where the chunk size is already small and doesn't need to be code split. In these cases, taking the code splitting approach will not benefit the app's efficiency and performance, but instead do the contrary.

Code splitting in a web application is like organizing a toolbox. Instead of carrying around a massive toolbox with every tool you might need, you divide it into smaller, specialized toolboxes. This way, when you only need a specific tool for a particular task, you can grab just that toolbox, making your work more efficient. Similarly, with code splitting, you break your application's JavaScript into smaller, more focused bundles. When a user visits a page, only the necessary code for that page is loaded, reducing initial load times and improving overall performance. This optimizes the user experience by minimizing unnecessary resource consumption.

Code splitting is a technique that divides a codebase into smaller, more manageable chunks. This can be done for a variety of reasons, such as to improve performance, reduce the size of the codebase, or make it easier to maintain and update. In the context of front-end development, code splitting is often used to improve the initial load time of a web application. By splitting the codebase into smaller chunks, only the code that is needed for the initial page load is sent to the browser. This can significantly reduce the amount of time it takes for the page to load and become interactive. Code splitting can be implemented in a variety of ways. One common approach is to use a bundler such as Webpack or Rollup.

Performance By only loading the code that is needed for the initial page load, code splitting can significantly reduce the amount of time it takes for the page to load and become interactive. This is important for providing a good user experience, especially on mobile devices. Size Code splitting can reduce the size of your codebase by eliminating the need to load all of your code at once. This can make your web application faster to download and deploy Maintainability Code splitting can make your codebase easier to maintain and update. By splitting your code into smaller chunks, you can isolate changes and avoid making unintended consequences to other parts of your codebase.

Code splitting makes it easier to handle long or unused code by breaking it down into smaller parts. If you use a bundler like Webpack or Vite, they will automatically analyze your code and divide it into parts based on their own algorithms. When combined with "lazy loading," a technique that delays loading modules and resources until they are needed, your JavaScript application's performance can be greatly improved. Ex: // This React component is loaded dynamically const SomeComponent = React.lazy(() => import('./SomeComponent')) // Lazy loaded Angular Route loadChildren: () => import('./some/some.module').then((m) => m.SomeModule),

Code splitting significantly impacts performance by breaking down a large, monolithic codebase into smaller, more manageable chunks. When a user accesses a web application, they don't need to download the entire codebase upfront. Instead, the browser can request and load only the specific code required for the current view or interaction. This approach leads to faster load times, as smaller files can be fetched more quickly, resulting in a snappier user experience. Moreover, it minimizes the amount of redundant data that users have to download, especially beneficial for those on slower connections or using mobile devices.

Using a popular framework like React, Vue, or Astro will do a lot of code-splitting heavy lifting for you. Of course there are optional things you can do to improve upon that: - React.Lazy and React.Suspense (or some other component-based lazy load mechanic) - Efficient use of page-based routing - Server-side rendering (render or compute on server) This can easily make a difference in load times. With these mechanics, you can create that smooth experience that every user wants.

You can also use meta frameworks like Next.js - which is built on top of React, that offers code splitting by default. During the build step, each route will be split into its own JavaScript bundle and any shared code between routes is also split into a different bundle to avoid the re-download of the same code on route navigations. Next.js also allows us to pre-load the code of other routes after initial page load to ensure faster navigation between routes.

Using dynamic imports To implement code splitting using dynamic imports, you can use the import() function. The import() function returns a promise that resolves to the imported module. You can then use the promise to load the module only when it is needed.

Using a bundler A bundler is a tool that can be used to combine multiple JavaScript files into a single bundle. Bundlers can also be used to split the codebase into smaller chunks, based on various criteria such as entry points, dependencies, and file size. Popular bundlers for front-end development include: Webpack Rollup Parcel To implement code splitting using a bundler, you will need to configure the bundler to split the codebase into chunks. Once the bundler has split the codebase, you will need to update your web application to load the chunks on demand.

In Angular, you can divide your application into feature modules, and each of these modules can be loaded lazily. This means that when a user navigates to a specific route, only the relevant module and its dependencies are fetched and loaded. Angular 15 introduced standalone APIs that enable the creation of independent shared components, and Angular 16 released an effortless process of migrating existing Angular projects to standalone applications.

Ideally, your code structure should reflect the sections of your main menu. Therefore, the code splitting strategy should also align with this structure. This approach ensures that users only load the code relevant to their current location and/or their permission, enhancing load times and performance.

Consider Module Federation. It gives us more control over how we want to bundle and organise our routes & modules at code, project & repository level. Where as `Code Splitting` is a feature that splits the bundle into many chunks dynamically at build time, and many a time we are not in control of the output. With the rise of SPA or even Multi SPA, code splitting is a must and is built into many javascript frameworks. However in my opinion, it's a Bottom-up approach to solve for performance. The Top-down approach is `Module Federation` that enables us to package, deploy and release modules independently to create a Multi-SPA. Each module can then be Code Splitted, for further performance and optimization.

From my experience, implementing code splitting in web development has opened doors to remarkable performance improvements. Breaking down the code into separate modules and loading only what's needed significantly reduced initial loading times, providing a more responsive user experience. Techniques like prefetching and preloading have optimised code retrieval speed. While the concept may sound complex, many tools and frameworks available today make code splitting implementation easier. Most importantly, with proper monitoring and testing, you can continually enhance your application's performance. Understanding these code-splitting principles can lead to more efficient and responsive web applications, offering users a better experience.