jamiebuilds / react-loadable

> A higher order component for loading components with dynamic imports. Install Example Happy Customers: • "I'm obsessed with this right now: CRA with React Router v4 and react-loadable. Free code splitting, this is so easy." • "Oh hey - using loadable component I knocked 13K off my initial load. Easy win!" • "Had a look and its awesome. shaved like 50kb off our main bundle." • "I've got that server-side rendering + code splitting + PWA ServiceWorker caching setup done 😎 (thanks to react-loadable). Now our frontend is super fast." • "Using react-loadable went from 221.28 KB → 115.76 KB @ main bundle. Fucking awesome and very simple API." • "We've reduced our entry chunk by a lot & reduced initial load time by ~50%!" • "React-loadable is killer! We've decreased our load size by over 50kb with only 2 files! Can't wait to see how much lower it will go." Users • AdHawk / Flooring Stores • Akutbolig.dk • Analog.Cafe • Ambrosus • Appbase.io • Atlassian • BBC News • Blytzpay • ClearTax • Cloudflare • Chibaki • Compass • Curio • Delivery.com • Doctor.com • Dollar Shave Club • Dresez • Edcast • Evidation Health • Flexport • Flyhomes • Gogo • Gofore • Graana • Localie • MediaTek MCS-Lite • NiYO Solutions Inc. • Officepulse • PageSpeed Green • Perx • Plottu • reformma • Render • Shift • Snipit • Spectrum.chat • Superblocks • Sprint Boards • Talentpair • Tinder • Unsplash • Wave • WUZZUF • Wxb > _If your company or project is using React Loadable, please open a PR and add > yourself to this list (in alphabetical order please)_ Also See: • - Building on top of and keeping the same API as , this library enables you to load content that is visible on the screen. • - Server Side Render add-on for . Discover & load automatically dynamically all files dependencies, e.g. splitted chunks, css, etc. Guide So you've got your React app, you're bundling it with Webpack, and things are going smooth. But then one day you notice your app's bundle is getting so big that it's slowing things down. It's time to start code-splitting your app! Code-splitting is the process of taking one large bundle containing your entire app, and splitting them up into multiple smaller bundles which contain separate parts of your app. This might seem difficult to do, but tools like Webpack have this built in, and React Loadable is designed to make it super simple. Route-based splitting vs. Component-based splitting A common piece of advice you will see is to break your app into separate routes and load each one asynchronously. This seems to work well enough for many apps– as a user, clicking a link and waiting for a page to load is a familiar experience on the web. But we can do better than that. Using most routing tools for React, a route is simply a component. There's nothing particularly special about them (Sorry Ryan and Michael– you're what's special). So what if we optimized for splitting around components instead of routes? What would that get us? As it turns out: Quite a lot. There are many more places than just routes where you can pretty easily split apart your app. Modals, tabs, and many more UI components hide content until the user has done something to reveal it. > **Example:** Maybe your app has a map buried inside of a tab component. Why > would you load a massive mapping library for the parent route every time when > the user may never go to that tab? Not to mention all the places where you can defer loading content until higher priority content is finished loading. That component at the bottom of your page which loads a bunch of libraries: Why should that be loaded at the same time as the content at the top? And because routes are just components, we can still easily code-split at the route level. Introducing new code-splitting points in your app should be so easy that you don't think twice about it. It should be a matter of changing a few lines of code and everything else should be automated. Introducing React Loadable React Loadable is a small library that makes component-centric code splitting incredibly easy in React. is a higher-order component (a function that creates a component) which lets you dynamically load any module before rendering it into your app. Let's imagine two components, one that imports and renders another. Right now we're depending on being imported synchronously via , but we don't need it until we go to render it. So why don't we just defer that? Using a **dynamic import** (a tc39 proposal currently at Stage 3) we can modify our component to load asynchronously. But that's a whole bunch of work, and it doesn't even handle a bunch of cases. What about when fails? What about server-side rendering? Instead you can use to abstract away the problem. Automatic code-splitting on When you use with Webpack 2+, it will automatically code-split for you with no additional configuration. This means that you can easily experiment with new code splitting points just by switching to and using React Loadable. Figure out what performs best for your app. Creating a great "Loading..." Component Rendering a static "Loading..." doesn't communicate enough to the user. You also need to think about error states, timeouts, and making it a nice experience. To make this all nice, your loading component receives a couple different props. Loading error states When your fails, your loading component will receive an prop which will be an object (otherwise it will be ). Avoiding _Flash Of Loading Component_ Sometimes components load really quickly ( Server-Side Rendering When you go to render all these dynamically loaded components, what you'll get is a whole bunch of loading screens. This really sucks, but the good news is that React Loadable is designed to make server-side rendering work as if nothing is being loaded dynamically. Here's our starting server using Express. Preloading all your loadable components on the server The first step to rendering the correct content from…