# code-splitting Published articles for code-splitting. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## React Router 7 Lazy Loading DevFeed: [React Router 7 Lazy Loading]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:51Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React](), [Optimization]() Tags: [code-splitting](), [lazy-loading](), [performance](), [react](), [react-router](), [react-router-7](), [react-router-lazy-loading](), [react-router-tutorial](), [tutorial]() ### AI overview This tutorial explains route-level lazy loading with React Router 7. It shows how splitting an application into smaller bundles can load only the code needed for a visited route, and demonstrates React.lazy, React Suspense, and @loadable/component. ### Source excerpt How to: React Router 7 Lazy Loading: code-splitting at route level helps you lazy-load just the things that are needed by the user, which dramatically improves the performance ... ## Infinite scroll with Next.js, Framer Motion, and Supabase DevFeed: [Infinite scroll with Next.js, Framer Motion, and Supabase]() Original publisher: [Read original article]() Author: Francesco Sansalvadore Published: 2023-04-04T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [infinite scroll](), [Next.js](), [Supabase](), [Framer Motion](), [web design](), [Server-side rendering](), [Caching]() Tags: [cache](), [code-splitting](), [data](), [how-to](), [infinite-scroll](), [next-js](), [performance](), [server-side-rendering](), [user-experience](), [web-design]() ### AI overview A tutorial on implementing infinite scrolling with Next.js, Supabase, and Framer Motion. It explains lazy loading ticket data in batches as the user scrolls, with techniques such as server-side rendering, code splitting, caching, prefetching, and debouncing to improve performance and user experience. ### Source excerpt Lazy load and paginate data on scroll with Next.js and a sprinkle of Framer Motion magic ✨ ## Optimising BBC Online's Code Splitting Strategy DevFeed: [Optimising BBC Online's Code Splitting Strategy]() Original publisher: [Read original article]() Author: Matt Williams Published: 2022-05-30T15:21:09Z Content type: article Language: en Sources: [BBC]() Topics: [JavaScript](), [Code](), [Website](), [modern web development]() Tags: [code](), [code-splitting](), [frameworks](), [javascript](), [performance](), [react](), [webpack](), [website]() ### AI overview This article explains BBC Online's code-splitting strategy for a large JavaScript website. It describes how splitting code into separate files can support parallel downloads and limit page-specific code to the pages that need it, while noting that excessive fragmentation can cause problems. The article says BBC Online's Presentation Layer had outgrown its existing strategy and introduces its use of shared core bundles. ### Source excerpt Photo by Sen on Unsplash Modern JavaScript websites are the result of complex code bases, and the code base which powers BBC Online is no exception. There are many dependencies and frameworks that we rely upon in order to provide the functionality that our end-users expect, as well as code written in-house to cater to the needs of our website and its users; being able to click a button to follow a topic, search for content and play videos all require JavaScript code to be run by the browser. For a website as large and with as many seemingly disparate needs as the BBC's various pages, the amount of code required can grow exponentially. The code needed to render a news article - with images, social media embeds, videos and onward journeys - has only small elements of commonality with the code required to power complex sports data tables - with team badges, functionality to hide or show columns based on the screen width of the user's device, display a team's form, or provide live in-page updates for events that are happening live. As such, it has long been the practice of the JavaScript community to implement code splitting. Rather than providing all of our JavaScript and dependencies into a single large file to be downloaded by the user, we can split our code into separate files. This can provide advantages on two fronts; downloading multiple smaller files can be more efficient when devices can start those downloads in parallel (though going too far and downloading too many small files can cause problems itself!), and the way that we choose to split our files can mean that some only need to be downloaded on certain pages. It is this second benefit which can be most powerful; if you have a large piece of code on your site that is only needed for a single page, then forcing users to download that code on every page is wasteful, and can cause problems for users who might have limits on the amount of data they can download on their network. We have been using code splitti ## What's the deal with SvelteKit? DevFeed: [What's the deal with SvelteKit?]() Original publisher: [Read original article]() Author: Rich Harris Published: 2020-11-05T00:00:00Z Content type: article Language: en Sources: [Svelte blog]() Topics: [Svelte](), [Framework](), [Development](), [Web Development](), [Server-side rendering](), [Routing (disambiguation)](), [Template](), [web applications](), [Webpack]() Tags: [code-splitting](), [development](), [framework](), [maintenance](), [onboarding](), [project](), [routing](), [server-side-rendering](), [ssr](), [support](), [svelte](), [webpack]() ### AI overview This article explains that Sapper will not reach version 1.0 because its successor, SvelteKit, is effectively a rewrite and rebrand. It describes Sapper as a Svelte-based app framework that supports server-side rendering, code-splitting, filesystem-based routing, and a productive project structure, then outlines migration motivations including simpler onboarding, lower maintenance and support burden, and reconsideration of module-bundling assumptions. ### Source excerpt If you didn't attend Svelte Summit, you can catch up on the Svelte Society YouTube page If you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0? The answer: never. This was slightly tongue-in-cheek -- as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand -- but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit. 'Futuristic Web Development' from Svelte Summit What's Sapper? Sapper is an app framework (or 'metaframework') built on top of Svelte (which is a component framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses filesystem-based routing (as popularised by Next and adopted by many other frameworks, albeit with some enhancements) -- your project's file structure mirrors the structure of the app itself. While the Svelte homepage and documentation encourages you to degit the sveltejs/template repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper. Why are we migrating to something new? Firstly, the distinction between sveltejs/template and sveltejs/sapper-template is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities ar ## Next.js 10 DevFeed: [Next.js 10]() Original publisher: [Read original article]() Author: Tim Neutkens Published: 2020-10-27T14:00:00Z Content type: release Language: en Sources: [Next.js Blog]() Topics: [Next.js](), [Optimization](), [Routing (disambiguation)](), [React]() Tags: [code-splitting](), [image](), [javascript](), [next-js](), [optimization](), [performance](), [react](), [routing](), [user-experience]() ### AI overview Next.js 10 introduces built-in image optimization, internationalized routing, analytics, React 17 support, Fast Refresh improvements, third-party CSS imports, easier codemod access through the CLI, and blocking fallbacks for static generation. The release also highlights reduced JavaScript payloads and performance improvements for Next.js applications. ### Source excerpt Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more! ## Next.js 9.2 DevFeed: [Next.js 9.2]() Original publisher: [Read original article]() Author: Tim Neutkens Published: 2020-01-15T19:37:43Z Content type: release Language: en Sources: [Next.js Blog]() Topics: [Next.js](), [CSS](), [Web Development](), [web applications]() Tags: [code-splitting](), [css](), [development](), [next-js](), [performance]() ### AI overview Next.js 9.2 adds native global CSS and CSS Module support, improves code splitting and HTTP/2 page-load performance, and introduces catch-all dynamic routes. The release is non-breaking and backward compatible. ### Source excerpt Next.js 9.2 introduces native support for CSS, aggressive code-splitting, catch-all dynamic routes, and more! ## Cascading Cache Invalidation DevFeed: [Cascading Cache Invalidation]() Original publisher: [Read original article]() Published: 2019-10-09T08:26:44Z Content type: article Language: en Sources: [Philip Walton]() Topics: [Caching](), [JavaScript](), [Web Development]() Tags: [cache](), [caching](), [code-splitting](), [dependencies](), [hash](), [javascript](), [production]() ### AI overview The article examines how revision-hashed JavaScript filenames interact with code splitting and dependency imports. It finds that changing a vendor chunk can alter its filename, forcing importing chunks to change as well and reducing the effectiveness of long-term caching. ### Source excerpt For several years now, pretty much every article published on caching best practices has recommended the following two things for deploying JavaScript code in production: Add revision information to the filenames of your assets (usually content hashes) ## Manually Lazy Load an Angular Module with ViewEngine and Ivy DevFeed: [Manually Lazy Load an Angular Module with ViewEngine and Ivy]() Original publisher: [Read original article]() Published: 2019-09-30T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Command-line interface](), [Webpack]() Tags: [angular](), [code-splitting](), [lazy-loading](), [webpack]() ### AI overview A tutorial on manually lazy-loading an Angular module in a way compatible with ViewEngine and Ivy. It explains Angular's router-based lazy loading, CLI and Webpack code splitting, dynamic loading syntax, and module instantiation. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Performance: Performance budgets with the Angular CLI DevFeed: [Angular Performance: Performance budgets with the Angular CLI]() Original publisher: [Read original article]() Published: 2019-08-28T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [Command-line interface]() Tags: [angular](), [cli](), [code-splitting](), [performance](), [videos]() ### AI overview This article explains how to define performance budgets with the Angular CLI, configure limits on metrics that affect an app's performance, monitor those budgets, and receive alerts when they are violated. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Performance: Preloading Lazy Routes DevFeed: [Angular Performance: Preloading Lazy Routes]() Original publisher: [Read original article]() Published: 2019-08-27T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [Development]() Tags: [angular](), [code-splitting](), [lazy-loading](), [library](), [modules](), [performance](), [route](), [videos]() ### AI overview A tutorial on preloading lazy routes in Angular. It covers preloading all lazy modules, defining a custom preloading strategy, and using ngx-quicklink to automatically load visible links. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Performance: Route Level Code Splitting DevFeed: [Angular Performance: Route Level Code Splitting]() Original publisher: [Read original article]() Published: 2019-08-26T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Code](), [Development](), [Web]() Tags: [angular](), [cli](), [code](), [code-splitting](), [generate](), [implement](), [lazy-loading](), [load](), [metric](), [performance](), [route](), [time-to-interactive](), [videos]() ### AI overview This tutorial explains route-level code splitting and lazy loading in Angular. It connects loading only the minimum necessary application code to improving time to interactive, and mentions generating lazy routes with the Angular CLI. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Version 8: New Features, Ivy, and Migration Considerations DevFeed: [Angular Version 8: New Features, Ivy, and Migration Considerations]() Original publisher: [Read original article]() Published: 2019-06-03T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [browser](), [bazel](), [Deployment](), [Tooling]() Tags: [angular](), [build](), [build-system](), [code-splitting](), [import](), [parallel](), [release](), [tooling](), [v8]() ### AI overview This tutorial reviews Angular 8's major changes, including differential loading, stabilized builders, automated deployment integrations, web workers, service worker improvements, code splitting, AngularJS integration, and improved IDE support. It explains that Ivy is included but not enabled by default and can be enabled experimentally. ### Source excerpt Lorem ipsum dolor sit amet ## React Router & Webpack in Production DevFeed: [React Router & Webpack in Production]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-03-13T04:00:09Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React Router](), [Webpack](), [Development](), [Code](), [API]() Tags: [api](), [code-splitting](), [polyfill](), [react](), [react-router](), [webpack]() ### AI overview A practical account of using React Router and Webpack in production for a large application with many routes and code splits. It explains the client-side setup, route organization, asynchronous data loading, server rendering, and differences between server and client builds. ### Source excerpt I've been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I've learned throughout building out my development / production config and how we are using webpack in production. ###Initial Setup Before I really dive into how my webpack config is setup and the problems I've found, I'll quickly go over how this app is setup. Currently, there's one entry point and it looks like this: import React from 'react' import { render } from 'react-dom' import { match, Router, browserHistory } from 'react-router' import AsyncProps from 'async-props' import routes from '../routes/index' /* globals document, window */ const { pathname, search, hash } = window.location const location = `${pathname}${search}${hash}` match({ routes, location }, () => { render( } routes={routes} history={browserHistory} />, document.getElementById('app') ) }) It looks like a standard react-router setup, except a couple things are different. For one, there's way too many routes to have them all in this file, so we are importing the main route object into this file. Second, we are using match on the client side. Without matching first, the client side would try to render before the splits were downloaded causing an error. You can read a little more about match on the client here. Next, we are using Ryan Florence's awesome async-props library for loading data into components. It allows me to load data from an api before the server renders components. It will pass the data down to the client for the client-side render, and then data will load as you navigate to new pages automatically. ###Routes Our main routes file looks like this: export default { component: 'div', path: '/', indexRoute: require('./index'), childRoutes: [ require('./login'), require('./account'), ... ] } There's a lot more require's in our app of course. And ## Boot your ajax app: Creating a splash screen with NProgress DevFeed: [Boot your ajax app: Creating a splash screen with NProgress]() Original publisher: [Read original article]() Published: 2013-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Single-page application (SPA)](), [JavaScript](), [Ajax](), [Document Object Model (DOM)](), [Caching](), [Web Development]() Tags: [app](), [caching](), [code-splitting](), [javascript](), [lazy-loading](), [screen](), [splash-screen](), [user-experience]() ### AI overview This tutorial explains how to use a splash screen and NProgress while a single-page JavaScript application starts. It describes hiding the app container, showing a progress indicator, loading JavaScript, templates, and backend data, and revealing the application when loading is complete. It also cautions that optimizing startup with code splitting, lazy loading, caching, or server-side rendering is preferable to relying on progress bars. ### Source excerpt Lorem ipsum dolor sit amet