[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3272":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":37,"discoverSource":38},3272,"react-loadable","jamiebuilds\u002Freact-loadable","jamiebuilds",":hourglass_flowing_sand: A higher order component for loading components with promises.","",null,"JavaScript",16526,759,141,34,0,1,2,3,43.64,"MIT License",false,"master",[25,26,27,28,29,30,31,32,33],"async","babel-plugin","code-splitting","imports","loading","react","server-side-rendering","ssr","webpack","2026-06-12 02:00:48","![React Loadable](http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-header.png)\n\n> A higher order component for loading components with dynamic imports.\n\n## Install\n\n```sh\nyarn add react-loadable\n```\n\n## Example\n\n```js\nimport Loadable from 'react-loadable';\nimport Loading from '.\u002Fmy-loading-component';\n\nconst LoadableComponent = Loadable({\n  loader: () => import('.\u002Fmy-component'),\n  loading: Loading,\n});\n\nexport default class App extends React.Component {\n  render() {\n    return \u003CLoadableComponent\u002F>;\n  }\n}\n```\n\n## Happy Customers:\n\n- [\"I'm obsessed with this right now: CRA with React Router v4 and react-loadable. Free code splitting, this is so easy.\"](https:\u002F\u002Ftwitter.com\u002Fmatzatorski\u002Fstatus\u002F872059865350406144)\n- [\"Oh hey - using loadable component I knocked 13K off my initial load. Easy win!\"](https:\u002F\u002Ftwitter.com\u002FAdamRackis\u002Fstatus\u002F846593080992153600)\n- [\"Had a look and its awesome. shaved like 50kb off our main bundle.\"](https:\u002F\u002Fgithub.com\u002Fquran\u002Fquran.com-frontend\u002Fpull\u002F701#issuecomment-287908551)\n- [\"I've got that server-side rendering + code splitting + PWA ServiceWorker caching setup done 😎 (thanks to react-loadable). Now our frontend is super fast.\"](https:\u002F\u002Ftwitter.com\u002Fmxstbr\u002Fstatus\u002F922375575217627136)\n- [\"Using react-loadable went from 221.28 KB → 115.76 KB @ main bundle. Fucking awesome and very simple API.\"](https:\u002F\u002Ftwitter.com\u002Fevgenyrodionov\u002Fstatus\u002F958821614644269057)\n- [\"We've reduced our entry chunk by a lot & reduced initial load time by ~50%!\"](https:\u002F\u002Fgithub.com\u002Fjamiebuilds\u002Freact-loadable\u002Fpull\u002F181)\n- [\"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.\"](https:\u002F\u002Fgithub.com\u002Fjamiebuilds\u002Freact-loadable\u002Fpull\u002F180\u002F)\n\n## Users\n\n- [AdHawk \u002F Flooring Stores](https:\u002F\u002Fwww.flooringstores.com)\n- [Akutbolig.dk](https:\u002F\u002Fwww.akutbolig.dk)\n- [Analog.Cafe](https:\u002F\u002Fwww.analog.cafe)\n- [Ambrosus](https:\u002F\u002Fambrosus.com)\n- [Appbase.io](https:\u002F\u002Fgithub.com\u002Fappbaseio\u002Freactivesearch)\n- [Atlassian](https:\u002F\u002Fwww.atlassian.com\u002F)\n- [BBC News](https:\u002F\u002Fgithub.com\u002FBBC-News\u002Fsimorgh)\n- [Blytzpay](https:\u002F\u002Fwww.blytzpay.com)\n- [ClearTax](https:\u002F\u002Fcleartax.in)\n- [Cloudflare](https:\u002F\u002Fwww.cloudflare.com)\n- [Chibaki](https:\u002F\u002Fchibaki.co)\n- [Compass](https:\u002F\u002Fcompass.com)\n- [Curio](https:\u002F\u002Fwww.curio.org)\n- [Delivery.com](https:\u002F\u002Fwww.delivery.com)\n- [Doctor.com](https:\u002F\u002Fwww.doctor.com\u002F)\n- [Dollar Shave Club](https:\u002F\u002Fgithub.com\u002Fdollarshaveclub)\n- [Dresez](https:\u002F\u002Fdresez.pk\u002F)\n- [Edcast](https:\u002F\u002Fwww.edcast.com\u002F)\n- [Evidation Health](https:\u002F\u002Fevidation.com\u002F)\n- [Flexport](https:\u002F\u002Fflexport.com\u002F)\n- [Flyhomes](https:\u002F\u002Fflyhomes.com)\n- [Gogo](https:\u002F\u002Fgogoair.com)\n- [Gofore](https:\u002F\u002Fgofore.com\u002Fen\u002Fhome\u002F)\n- [Graana](https:\u002F\u002Fwww.graana.com\u002F)\n- [Localie](https:\u002F\u002Flocalie.co\u002Fen)\n- [MediaTek MCS-Lite](https:\u002F\u002Fgithub.com\u002FMCS-Lite)\n- [NiYO Solutions Inc.](https:\u002F\u002Fwww.goniyo.com\u002F)\n- [Officepulse](https:\u002F\u002Fwww.officepulse.in\u002F)\n- [PageSpeed Green](https:\u002F\u002Fpagespeed.green\u002F)\n- [Perx](https:\u002F\u002Fwww.perxtech.com\u002F)\n- [Plottu](https:\u002F\u002Fpublic.plottu.com)\n- [reformma](https:\u002F\u002Freformma.com.br)\n- [Render](https:\u002F\u002Frender.com)\n- [Shift](https:\u002F\u002Fshift.com)\n- [Snipit](https:\u002F\u002Fsnipit.io)\n- [Spectrum.chat](https:\u002F\u002Fspectrum.chat)\n- [Superblocks](https:\u002F\u002Fsuperblocks.com)\n- [Sprint Boards](https:\u002F\u002Fsprintboards.io)\n- [Talentpair](https:\u002F\u002Ftalentpair.com)\n- [Tinder](https:\u002F\u002Ftinder.com\u002F)\n- [Unsplash](https:\u002F\u002Funsplash.com\u002F)\n- [Wave](https:\u002F\u002Fwaveapps.com\u002F)\n- [WUZZUF](https:\u002F\u002Fwuzzuf.net\u002F)\n- [Wxb](https:\u002F\u002Fwxb.com\u002Fwxpush)\n\n> _If your company or project is using React Loadable, please open a PR and add\n> yourself to this list (in alphabetical order please)_\n\n## Also See:\n\n- [`react-loadable-visibility`](https:\u002F\u002Fgithub.com\u002Fstratiformltd\u002Freact-loadable-visibility) - Building on top of and keeping the same API as `react-loadable`, this library enables you to load content that is visible on the screen.\n\n- [`react-loadable-ssr-addon`](https:\u002F\u002Fgithub.com\u002Fthemgoncalves\u002Freact-loadable-ssr-addon) - Server Side Render add-on for `react-loadable`. Discover & load automatically dynamically all files dependencies, e.g. splitted chunks, css, etc.\n\n\u003Ch2>\n  \u003Chr>\n  \u003Chr>\n  \u003Cimg src=\"http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-guide.png\" alt=\"GUIDE\">\n  \u003Chr>\n  \u003Chr>\n  \u003Csmall>Guide\u003C\u002Fsmall>\n\u003C\u002Fh2>\n\nSo you've got your React app, you're bundling it with Webpack, and things are\ngoing smooth. But then one day you notice your app's bundle is getting so big\nthat it's slowing things down.\n\nIt's time to start code-splitting your app!\n\n![A single giant bundle vs multiple smaller bundles](http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-split-bundles.png)\n\nCode-splitting is the process of taking one large bundle containing your entire\napp, and splitting them up into multiple smaller bundles which contain separate\nparts of your app.\n\nThis might seem difficult to do, but tools like Webpack have this built in, and\nReact Loadable is designed to make it super simple.\n\n### Route-based splitting vs. Component-based splitting\n\nA common piece of advice you will see is to break your app into separate routes\nand load each one asynchronously. This seems to work well enough for many apps–\nas a user, clicking a link and waiting for a page to load is a familiar\nexperience on the web.\n\nBut we can do better than that.\n\nUsing most routing tools for React, a route is simply a component. There's\nnothing particularly special about them (Sorry Ryan and Michael– you're what's\nspecial). So what if we optimized for splitting around components instead of\nroutes? What would that get us?\n\n![Route vs. component centric code splitting](http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-component-splitting.png)\n\nAs it turns out: Quite a lot. There are many more places than just routes where\nyou can pretty easily split apart your app. Modals, tabs, and many more UI\ncomponents hide content until the user has done something to reveal it.\n\n> **Example:** Maybe your app has a map buried inside of a tab component. Why\n> would you load a massive mapping library for the parent route every time when\n> the user may never go to that tab?\n\nNot to mention all the places where you can defer loading content until higher\npriority content is finished loading. That component at the bottom of your page\nwhich loads a bunch of libraries: Why should that be loaded at the same time as\nthe content at the top?\n\nAnd because routes are just components, we can still easily code-split at the\nroute level.\n\nIntroducing new code-splitting points in your app should be so easy that you\ndon't think twice about it. It should be a matter of changing a few lines of\ncode and everything else should be automated.\n\n### Introducing React Loadable\n\nReact Loadable is a small library that makes component-centric code splitting\nincredibly easy in React.\n\n`Loadable` is a higher-order component (a function that creates a component)\nwhich lets you dynamically load any module before rendering it into your app.\n\nLet's imagine two components, one that imports and renders another.\n\n```js\nimport Bar from '.\u002Fcomponents\u002FBar';\n\nclass Foo extends React.Component {\n  render() {\n    return \u003CBar\u002F>;\n  }\n}\n```\n\nRight now we're depending on `Bar` being imported synchronously via `import`,\nbut we don't need it until we go to render it. So why don't we just defer that?\n\nUsing a **dynamic import** ([a tc39 proposal currently at Stage 3](https:\u002F\u002Fgithub.com\u002Ftc39\u002Fproposal-dynamic-import))\nwe can modify our component to load `Bar` asynchronously.\n\n```js\nclass MyComponent extends React.Component {\n  state = {\n    Bar: null\n  };\n\n  componentWillMount() {\n    import('.\u002Fcomponents\u002FBar').then(Bar => {\n      this.setState({ Bar: Bar.default });\n    });\n  }\n\n  render() {\n    let {Bar} = this.state;\n    if (!Bar) {\n      return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n    } else {\n      return \u003CBar\u002F>;\n    };\n  }\n}\n```\n\nBut that's a whole bunch of work, and it doesn't even handle a bunch of cases.\nWhat about when `import()` fails? What about server-side rendering?\n\nInstead you can use `Loadable` to abstract away the problem.\n\n```js\nimport Loadable from 'react-loadable';\n\nconst LoadableBar = Loadable({\n  loader: () => import('.\u002Fcomponents\u002FBar'),\n  loading() {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>\n  }\n});\n\nclass MyComponent extends React.Component {\n  render() {\n    return \u003CLoadableBar\u002F>;\n  }\n}\n```\n\n### Automatic code-splitting on `import()`\n\nWhen you use `import()` with Webpack 2+, it will\n[automatically code-split](https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fcode-splitting\u002F) for\nyou with no additional configuration.\n\nThis means that you can easily experiment with new code splitting points just\nby switching to `import()` and using React Loadable. Figure out what performs\nbest for your app.\n\n### Creating a great \"Loading...\" Component\n\nRendering a static \"Loading...\" doesn't communicate enough to the user. You\nalso need to think about error states, timeouts, and making it a nice\nexperience.\n\n```js\nfunction Loading() {\n  return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n}\n\nLoadable({\n  loader: () => import('.\u002FWillFailToLoad'), \u002F\u002F oh no!\n  loading: Loading,\n});\n```\n\nTo make this all nice, your [loading component](#loadingcomponent) receives a\ncouple different props.\n\n#### Loading error states\n\nWhen your [`loader`](optsloader) fails, your [loading component](#loadingcomponent)\nwill receive an [`error`](propserror) prop which will be an `Error` object (otherwise it\nwill be `null`).\n\n```js\nfunction Loading(props) {\n  if (props.error) {\n    return \u003Cdiv>Error! \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  }\n}\n```\n\n#### Avoiding _Flash Of Loading Component_\n\nSometimes components load really quickly (\u003C200ms) and the loading screen only\nquickly flashes on the screen.\n\nA number of user studies have proven that this causes users to perceive things\ntaking longer than they really have. If you don't show anything, users perceive\nit as being faster.\n\nSo your loading component will also get a [`pastDelay` prop](#propspastdelay)\nwhich will only be true once the component has taken longer to load than a set\n[delay](#optsdelay).\n\n```js\nfunction Loading(props) {\n  if (props.error) {\n    return \u003Cdiv>Error! \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else if (props.pastDelay) {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  } else {\n    return null;\n  }\n}\n```\n\nThis delay defaults to `200ms` but you can also customize the\n[delay](#optsdelay) in `Loadable`.\n\n```js\nLoadable({\n  loader: () => import('.\u002Fcomponents\u002FBar'),\n  loading: Loading,\n  delay: 300, \u002F\u002F 0.3 seconds\n});\n```\n\n#### Timing out when the `loader` is taking too long\n\nSometimes network connections suck and never resolve or fail, they just hang\nthere forever. This sucks for the user because they won't know if it should\nalways take this long, or if they should try refreshing.\n\nThe [loading component](#loadingcomponent) will receive a\n[`timedOut` prop](#propstimedout) which will be set to `true` when the\n[`loader`](#optsloader) has timed out.\n\n```js\nfunction Loading(props) {\n  if (props.error) {\n    return \u003Cdiv>Error! \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else if (props.timedOut) {\n    return \u003Cdiv>Taking a long time... \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else if (props.pastDelay) {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  } else {\n    return null;\n  }\n}\n```\n\nHowever, this feature is disabled by default. To turn it on, you can pass a\n[`timeout` option](#optstimeout) to `Loadable`.\n\n```js\nLoadable({\n  loader: () => import('.\u002Fcomponents\u002FBar'),\n  loading: Loading,\n  timeout: 10000, \u002F\u002F 10 seconds\n});\n```\n\n### Customizing rendering\n\nBy default `Loadable` will render the `default` export of the returned module.\nIf you want to customize this behavior you can use the\n[`render` option](#optsrender).\n\n```js\nLoadable({\n  loader: () => import('.\u002Fmy-component'),\n  render(loaded, props) {\n    let Component = loaded.namedExport;\n    return \u003CComponent {...props}\u002F>;\n  }\n});\n```\n\n### Loading multiple resources\n\nTechnically you can do whatever you want within `loader()` as long as it\nreturns a promise and [you're able to render something](#customizing-rendering).\nBut writing it out can be a bit annoying.\n\nTo make it easier to load multiple resources in parallel, you can use\n[`Loadable.Map`](#loadablemap).\n\n```js\nLoadable.Map({\n  loader: {\n    Bar: () => import('.\u002FBar'),\n    i18n: () => fetch('.\u002Fi18n\u002Fbar.json').then(res => res.json()),\n  },\n  render(loaded, props) {\n    let Bar = loaded.Bar.default;\n    let i18n = loaded.i18n;\n    return \u003CBar {...props} i18n={i18n}\u002F>;\n  },\n});\n```\n\nWhen using `Loadable.Map` the [`render()` method](#optsrender) is required. It\nwill be passed a `loaded` param which will be an object matching the shape of\nyour `loader`.\n\n### Preloading\n\nAs an optimization, you can also decide to preload a component before it gets\nrendered.\n\nFor example, if you need to load a new component when a button gets pressed,\nyou could start preloading the component when the user hovers over the button.\n\nThe component created by `Loadable` exposes a\n[static `preload` method](#loadablecomponentpreload) which does exactly this.\n\n```js\nconst LoadableBar = Loadable({\n  loader: () => import('.\u002FBar'),\n  loading: Loading,\n});\n\nclass MyComponent extends React.Component {\n  state = { showBar: false };\n\n  onClick = () => {\n    this.setState({ showBar: true });\n  };\n\n  onMouseOver = () => {\n    LoadableBar.preload();\n  };\n\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cbutton\n          onClick={this.onClick}\n          onMouseOver={this.onMouseOver}>\n          Show Bar\n        \u003C\u002Fbutton>\n        {this.state.showBar && \u003CLoadableBar\u002F>}\n      \u003C\u002Fdiv>\n    )\n  }\n}\n```\n\n\u003Ch2>\n  \u003Chr>\n  \u003Chr>\n  \u003Cimg src=\"http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-ssr.png\" alt=\"SERVER SIDE RENDERING\">\n  \u003Chr>\n  \u003Chr>\n  \u003Csmall>Server-Side Rendering\u003C\u002Fsmall>\n\u003C\u002Fh2>\n\nWhen you go to render all these dynamically loaded components, what you'll get\nis a whole bunch of loading screens.\n\nThis really sucks, but the good news is that React Loadable is designed to\nmake server-side rendering work as if nothing is being loaded dynamically.\n\nHere's our starting server using [Express](https:\u002F\u002Fexpressjs.com\u002F).\n\n```js\nimport express from 'express';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom\u002Fserver';\nimport App from '.\u002Fcomponents\u002FApp';\n\nconst app = express();\n\napp.get('\u002F', (req, res) => {\n  res.send(`\n    \u003C!doctype html>\n    \u003Chtml lang=\"en\">\n      \u003Chead>...\u003C\u002Fhead>\n      \u003Cbody>\n        \u003Cdiv id=\"app\">${ReactDOMServer.renderToString(\u003CApp\u002F>)}\u003C\u002Fdiv>\n        \u003Cscript src=\"\u002Fdist\u002Fmain.js\">\u003C\u002Fscript>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  `);\n});\n\napp.listen(3000, () => {\n  console.log('Running on http:\u002F\u002Flocalhost:3000\u002F');\n});\n```\n\n### Preloading all your loadable components on the server\n\nThe first step to rendering the correct content from the server is to make sure\nthat all of your loadable components are already loaded when you go to render\nthem.\n\nTo do this, you can use the [`Loadable.preloadAll`](#loadablepreloadall)\nmethod. It returns a promise that will resolve when all your loadable\ncomponents are ready.\n\n```js\nLoadable.preloadAll().then(() => {\n  app.listen(3000, () => {\n    console.log('Running on http:\u002F\u002Flocalhost:3000\u002F');\n  });\n});\n```\n\n### Picking up a server-side rendered app on the client\n\nThis is where things get a little bit tricky. So let's prepare ourselves\nlittle bit.\n\nIn order for us to pick up what was rendered from the server we need to have\nall the same code that was used to render on the server.\n\nTo do this, we first need our loadable components telling us which modules they\nare rendering.\n\n#### Declaring which modules are being loaded\n\nThere are two options in [`Loadable`](#loadable) and\n[`Loadable.Map`](#loadablemap) which are used to tell us which modules our\ncomponent is trying to load: [`opts.modules`](#optsmodules) and\n[`opts.webpack`](#optswebpack).\n\n```js\nLoadable({\n  loader: () => import('.\u002FBar'),\n  modules: ['.\u002FBar'],\n  webpack: () => [require.resolveWeak('.\u002FBar')],\n});\n```\n\nBut don't worry too much about these options. React Loadable includes a\n[Babel plugin](#babel-plugin) to add them for you.\n\nJust add the `react-loadable\u002Fbabel` plugin to your Babel config:\n\n```json\n{\n  \"plugins\": [\n    \"react-loadable\u002Fbabel\"\n  ]\n}\n```\n\nNow these options will automatically be provided.\n\nFor typescript you can use [react-loadable-ts-transformer](https:\u002F\u002Fgithub.com\u002Fstushurik\u002Freact-loadable-ts-transformer) which is a ts analog of react-loadable\u002Fbabel plugin.\n\n#### Finding out which dynamic modules were rendered\n\nNext we need to find out which modules were actually rendered when a request\ncomes in.\n\nFor this, there is [`Loadable.Capture`](#loadablecapture) component which can\nbe used to collect all the modules that were rendered.\n\n```js\nimport Loadable from 'react-loadable';\n\napp.get('\u002F', (req, res) => {\n  let modules = [];\n\n  let html = ReactDOMServer.renderToString(\n    \u003CLoadable.Capture report={moduleName => modules.push(moduleName)}>\n      \u003CApp\u002F>\n    \u003C\u002FLoadable.Capture>\n  );\n\n  console.log(modules);\n\n  res.send(`...${html}...`);\n});\n```\n\n#### Mapping loaded modules to bundles\n\nIn order to make sure that the client loads all the modules that were rendered\nserver-side, we'll need to map them to the bundles that Webpack created.\n\nThis comes in two parts.\n\nFirst we need Webpack to tell us which bundles each module lives inside. For\nthis there is the [React Loadable Webpack plugin](#webpack-plugin).\n\nImport the `ReactLoadablePlugin` from `react-loadable\u002Fwebpack` and include it\nin your webpack config. Pass it a `filename` for where to store the JSON data\nabout our bundles.\n\n```js\n\u002F\u002F webpack.config.js\nimport { ReactLoadablePlugin } from 'react-loadable\u002Fwebpack';\n\nexport default {\n  plugins: [\n    new ReactLoadablePlugin({\n      filename: '.\u002Fdist\u002Freact-loadable.json',\n    }),\n  ],\n};\n```\n\nThen we'll go back to our server and use this data to convert our modules to\nbundles.\n\nTo convert from modules to bundles, import the [`getBundles`](#getbundles)\nmethod from `react-loadable\u002Fwebpack` and the data from Webpack.\n\n```js\nimport Loadable from 'react-loadable';\nimport { getBundles } from 'react-loadable\u002Fwebpack'\nimport stats from '.\u002Fdist\u002Freact-loadable.json';\n\napp.get('\u002F', (req, res) => {\n  let modules = [];\n\n  let html = ReactDOMServer.renderToString(\n    \u003CLoadable.Capture report={moduleName => modules.push(moduleName)}>\n      \u003CApp\u002F>\n    \u003C\u002FLoadable.Capture>\n  );\n\n  let bundles = getBundles(stats, modules);\n\n  \u002F\u002F ...\n});\n```\n\nWe can then render these bundles into `\u003Cscript>` tags in our HTML.\n\nIt is important that the bundles are included _before_ the main bundle, so that\nthey can be loaded by the browser prior to the app rendering.\n\nHowever, as the Webpack manifest (including the logic for parsing bundles) lives in\nthe main bundle, it will need to be extracted into its own chunk.\n\nThis is easy to do with the [CommonsChunkPlugin](https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fcommons-chunk-plugin\u002F)\n\n```js\n\u002F\u002F webpack.config.js\nexport default {\n  plugins: [\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'manifest',\n      minChunks: Infinity\n    })\n  ]\n}\n```\n\n_Notice: As of Webpack 4 the CommonsChunkPlugin has been removed and the manifest doesn't need to be extracted anymore._\n\n```js\nlet bundles = getBundles(stats, modules);\n\nres.send(`\n  \u003C!doctype html>\n  \u003Chtml lang=\"en\">\n    \u003Chead>...\u003C\u002Fhead>\n    \u003Cbody>\n      \u003Cdiv id=\"app\">${html}\u003C\u002Fdiv>\n      \u003Cscript src=\"\u002Fdist\u002Fmanifest.js\">\u003C\u002Fscript>\n      \u003Cscript src=\"\u002Fdist\u002Fmain.js\">\u003C\u002Fscript>\n      ${bundles.map(bundle => {\n        return `\u003Cscript src=\"\u002Fdist\u002F${bundle.file}\">\u003C\u002Fscript>`\n        \u002F\u002F alternatively if you are using publicPath option in webpack config\n        \u002F\u002F you can use the publicPath value from bundle, e.g:\n        \u002F\u002F return `\u003Cscript src=\"${bundle.publicPath}\">\u003C\u002Fscript>`\n      }).join('\\n')}\n      \u003Cscript>window.main();\u003C\u002Fscript>\n    \u003C\u002Fbody>\n  \u003C\u002Fhtml>\n`);\n```\n\n#### Preloading ready loadable components on the client\n\nWe can use the [`Loadable.preloadReady()`](#loadablepreloadready) method on the\nclient to preload the loadable components that were included on the page.\n\nLike [`Loadable.preloadAll()`](#loadablepreloadall), it returns a promise,\nwhich on resolution means that we can hydrate our app.\n\n```js\n\u002F\u002F src\u002Fentry.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Loadable from 'react-loadable';\nimport App from '.\u002Fcomponents\u002FApp';\n\nwindow.main = () => {\n  Loadable.preloadReady().then(() => {\n    ReactDOM.hydrate(\u003CApp\u002F>, document.getElementById('app'));\n  });\n};\n\n```\n\n\u003Ch4 align=\"center\">\n  Now server-side rendering should work perfectly!\n\u003C\u002Fh4>\n\n\u003Ch2>\n  \u003Chr>\n  \u003Chr>\n  \u003Cimg src=\"http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-api-docs.png\" alt=\"API DOCS\">\n  \u003Chr>\n  \u003Chr>\n  \u003Csmall>API Docs\u003C\u002Fsmall>\n\u003C\u002Fh2>\n\n### `Loadable`\n\nA higher-order component for dynamically [loading](#optsloader) a module before\n[rendering](#optsrender) it, a [loading](#opts.loading) component is rendered\nwhile the module is unavailable.\n\n```js\nconst LoadableComponent = Loadable({\n  loader: () => import('.\u002FBar'),\n  loading: Loading,\n  delay: 200,\n  timeout: 10000,\n});\n```\n\nThis returns a [LoadableComponent](#loadablecomponent).\n\n### `Loadable.Map`\n\nA higher-order component that allows you to load multiple resources in parallel.\n\nLoadable.Map's [`opts.loader`](#optsloader) accepts an object of functions, and\nneeds a [`opts.render`](#optsrender) method.\n\n```js\nLoadable.Map({\n  loader: {\n    Bar: () => import('.\u002FBar'),\n    i18n: () => fetch('.\u002Fi18n\u002Fbar.json').then(res => res.json()),\n  },\n  render(loaded, props) {\n    let Bar = loaded.Bar.default;\n    let i18n = loaded.i18n;\n    return \u003CBar {...props} i18n={i18n}\u002F>;\n  }\n});\n```\n\nWhen using `Loadable.Map` the `render()` method's `loaded` param will be an\nobject with the same shape as your `loader`.\n\n### `Loadable` and `Loadable.Map` Options\n\n#### `opts.loader`\n\nA function returning a promise that loads your module.\n\n```js\nLoadable({\n  loader: () => import('.\u002FBar'),\n});\n```\n\nWhen using with [`Loadable.Map`](#loadablemap) this accepts an object of these\ntypes of functions.\n\n```js\nLoadable.Map({\n  loader: {\n    Bar: () => import('.\u002FBar'),\n    i18n: () => fetch('.\u002Fi18n\u002Fbar.json').then(res => res.json()),\n  },\n});\n```\n\nWhen using with `Loadable.Map` you'll also need to pass a\n[`opts.render`](#optsrender) function.\n\n#### `opts.loading`\n\nA [`LoadingComponent`](#loadingcomponent) that renders while a module is\nloading or when it errors.\n\n```js\nLoadable({\n  loading: LoadingComponent,\n});\n```\n\nThis option is required, if you don't want to render anything, return `null`.\n\n```js\nLoadable({\n  loading: () => null,\n});\n```\n\n#### `opts.delay`\n\nTime to wait (in milliseconds) before passing\n[`props.pastDelay`](#propspastdelay) to your [`loading`](#optsloading)\ncomponent. This defaults to `200`.\n\n```js\nLoadable({\n  delay: 200\n});\n```\n\n[Read more about delays](#avoiding-flash-of-loading-component).\n\n#### `opts.timeout`\n\nTime to wait (in milliseconds) before passing\n[`props.timedOut`](#propstimedout) to your [`loading`](#optsloading) component.\nThis is turned off by default.\n\n```js\nLoadable({\n  timeout: 10000\n});\n```\n\n[Read more about timeouts](#timing-out-when-the-loader-is-taking-too-long).\n\n#### `opts.render`\n\nA function to customize the rendering of loaded modules.\n\nReceives `loaded` which is the resolved value of [`opts.loader`](#optsloader)\nand `props` which are the props passed to the\n[`LoadableComponent`](#loadablecomponent).\n\n```js\nLoadable({\n  render(loaded, props) {\n    let Component = loaded.default;\n    return \u003CComponent {...props}\u002F>;\n  }\n});\n```\n\n#### `opts.webpack`\n\nAn optional function which returns an array of Webpack module ids which you can\nget with `require.resolveWeak`.\n\n```js\nLoadable({\n  loader: () => import('.\u002FFoo'),\n  webpack: () => [require.resolveWeak('.\u002FFoo')],\n});\n```\n\nThis option can be automated with the [Babel Plugin](#babel-plugin).\n\n#### `opts.modules`\n\nAn optional array with module paths for your imports.\n\n```js\nLoadable({\n  loader: () => import('.\u002Fmy-component'),\n  modules: ['.\u002Fmy-component'],\n});\n```\n\nThis option can be automated with the [Babel Plugin](#babel-plugin).\n\n### `LoadableComponent`\n\nThis is the component returned by `Loadable` and `Loadable.Map`.\n\n```js\nconst LoadableComponent = Loadable({\n  \u002F\u002F ...\n});\n```\n\nProps passed to this component will be passed straight through to the\ndynamically loaded component via [`opts.render`](#optsrender).\n\n#### `LoadableComponent.preload()`\n\nThis is a static method on [`LoadableComponent`](#loadablecomponent) which can\nbe used to load the component ahead of time.\n\n```js\nconst LoadableComponent = Loadable({...});\n\nLoadableComponent.preload();\n```\n\nThis returns a promise, but you should avoid waiting for that promise to\nresolve to update your UI. In most cases it creates a bad user experience.\n\n[Read more about preloading](#preloading).\n\n### `LoadingComponent`\n\nThis is the component you pass to [`opts.loading`](#optsloading).\n\n```js\nfunction LoadingComponent(props) {\n  if (props.error) {\n    \u002F\u002F When the loader has errored\n    return \u003Cdiv>Error! \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else if (props.timedOut) {\n    \u002F\u002F When the loader has taken longer than the timeout\n    return \u003Cdiv>Taking a long time... \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else if (props.pastDelay) {\n    \u002F\u002F When the loader has taken longer than the delay\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  } else {\n    \u002F\u002F When the loader has just started\n    return null;\n  }\n}\n\nLoadable({\n  loading: LoadingComponent,\n});\n```\n\n[Read more about loading components](#creating-a-great-loading-component)\n\n#### `props.error`\n\nAn `Error` object passed to [`LoadingComponent`](#loadingcomponent) when the\n[`loader`](#optsloader) has failed. When there is no error, `null` is\npassed.\n\n```js\nfunction LoadingComponent(props) {\n  if (props.error) {\n    return \u003Cdiv>Error!\u003C\u002Fdiv>;\n  } else {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  }\n}\n```\n\n[Read more about errors](#loading-error-states).\n\n#### `props.retry`\n\nA function prop passed to [`LoadingComponent`](#loadingcomponent) when the\n[`loader`](#optsloader) has failed, used to retry loading the component.\n\n```js\nfunction LoadingComponent(props) {\n  if (props.error) {\n    return \u003Cdiv>Error! \u003Cbutton onClick={ props.retry }>Retry\u003C\u002Fbutton>\u003C\u002Fdiv>;\n  } else {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  }\n}\n```\n\n[Read more about errors](#loading-error-states).\n\n#### `props.timedOut`\n\nA boolean prop passed to [`LoadingComponent`](#loadingcomponent) after a set\n[`timeout`](#optstimeout).\n\n```js\nfunction LoadingComponent(props) {\n  if (props.timedOut) {\n    return \u003Cdiv>Taking a long time...\u003C\u002Fdiv>;\n  } else {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  }\n}\n```\n\n[Read more about timeouts](#timing-out-when-the-loader-is-taking-too-long).\n\n#### `props.pastDelay`\n\nA boolean prop passed to [`LoadingComponent`](#loadingcomponent) after a set\n[`delay`](#optsdelay).\n\n```js\nfunction LoadingComponent(props) {\n  if (props.pastDelay) {\n    return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  } else {\n    return null;\n  }\n}\n```\n\n[Read more about delays](#avoiding-flash-of-loading-component).\n\n### `Loadable.preloadAll()`\n\nThis will call all of the\n[`LoadableComponent.preload`](#loadablecomponentpreload) methods recursively\nuntil they are all resolved. Allowing you to preload all of your dynamic\nmodules in environments like the server.\n\n```js\nLoadable.preloadAll().then(() => {\n  app.listen(3000, () => {\n    console.log('Running on http:\u002F\u002Flocalhost:3000\u002F');\n  });\n});\n```\n\nIt's important to note that this requires that you declare all of your loadable\ncomponents when modules are initialized rather than when your app is being\nrendered.\n\n**Good:**\n\n```js\n\u002F\u002F During module initialization...\nconst LoadableComponent = Loadable({...});\n\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    \u002F\u002F ...\n  }\n}\n```\n\n**Bad:**\n\n```js\n\u002F\u002F ...\n\nclass MyComponent extends React.Component {\n  componentDidMount() {\n    \u002F\u002F During app render...\n    const LoadableComponent = Loadable({...});\n  }\n}\n```\n\n> **Note:** `Loadable.preloadAll()` will not work if you have more than one\n> copy of `react-loadable` in your app.\n\n[Read more about preloading on the server](#preloading-all-your-loadable-components-on-the-server).\n\n### `Loadable.preloadReady()`\n\nCheck for modules that are already loaded in the browser and call the matching\n[`LoadableComponent.preload`](#loadablecomponentpreload) methods.\n\n```js\nLoadable.preloadReady().then(() => {\n  ReactDOM.hydrate(\u003CApp\u002F>, document.getElementById('app'));\n});\n```\n\n[Read more about preloading on the client](#waiting-to-render-on-the-client-until-all-the-bundles-are-loaded).\n\n### `Loadable.Capture`\n\nA component for reporting which modules were rendered.\n\nAccepts a `report` prop which is called for every `moduleName` that is\nrendered via React Loadable.\n\n```js\nlet modules = [];\n\nlet html = ReactDOMServer.renderToString(\n  \u003CLoadable.Capture report={moduleName => modules.push(moduleName)}>\n    \u003CApp\u002F>\n  \u003C\u002FLoadable.Capture>\n);\n\nconsole.log(modules);\n```\n\n[Read more about capturing rendered modules](#finding-out-which-dynamic-modules-were-rendered).\n\n## Babel Plugin\n\nProviding [`opts.webpack`](#optswebpack) and [`opts.modules`](#optsmodules) for\nevery loadable component is a lot of manual work to remember to do.\n\nInstead you can add the Babel plugin to your config and it will automate it for\nyou:\n\n```json\n{\n  \"plugins\": [\"react-loadable\u002Fbabel\"]\n}\n```\n\n**Input**\n\n```js\nimport Loadable from 'react-loadable';\n\nconst LoadableMyComponent = Loadable({\n  loader: () => import('.\u002FMyComponent'),\n});\n\nconst LoadableComponents = Loadable.Map({\n  loader: {\n    One: () => import('.\u002FOne'),\n    Two: () => import('.\u002FTwo'),\n  },\n});\n```\n\n**Output**\n\n```js\nimport Loadable from 'react-loadable';\nimport path from 'path';\n\nconst LoadableMyComponent = Loadable({\n  loader: () => import('.\u002FMyComponent'),\n  webpack: () => [require.resolveWeak('.\u002FMyComponent')],\n  modules: [path.join(__dirname, '.\u002FMyComponent')],\n});\n\nconst LoadableComponents = Loadable.Map({\n  loader: {\n    One: () => import('.\u002FOne'),\n    Two: () => import('.\u002FTwo'),\n  },\n  webpack: () => [require.resolveWeak('.\u002FOne'), require.resolveWeak('.\u002FTwo')],\n  modules: [path.join(__dirname, '.\u002FOne'), path.join(__dirname, '.\u002FTwo')],\n});\n```\n\n[Read more about declaring modules](#declaring-which-modules-are-being-loaded).\n\n## Webpack Plugin\n\nIn order to [send the right bundles down](#mapping-loaded-modules-to-bundles)\nwhen rendering server-side, you'll need the React Loadable Webpack plugin \nto provide you with a mapping of modules to bundles.\n\n```js\n\u002F\u002F webpack.config.js\nimport { ReactLoadablePlugin } from 'react-loadable\u002Fwebpack';\n\nexport default {\n  plugins: [\n    new ReactLoadablePlugin({\n      filename: '.\u002Fdist\u002Freact-loadable.json',\n    }),\n  ],\n};\n```\n\nThis will create a file (`opts.filename`) which you can import to map modules\nto bundles.\n\n[Read more about mapping modules to bundles](#mapping-loaded-modules-to-bundles).\n\n### `getBundles`\n\nA method exported by `react-loadable\u002Fwebpack` for converting modules to\nbundles.\n\n```js\nimport { getBundles } from 'react-loadable\u002Fwebpack';\n\nlet bundles = getBundles(stats, modules);\n```\n\n[Read more about mapping modules to bundles](#mapping-loaded-modules-to-bundles).\n\n\u003Ch2>\n  \u003Chr>\n  \u003Chr>\n  \u003Cimg src=\"http:\u002F\u002Fthejameskyle.com\u002Fimg\u002Freact-loadable-faq.png\" alt=\"FAQ\">\n  \u003Chr>\n  \u003Chr>\n  \u003Csmall>FAQ\u003C\u002Fsmall>\n\u003C\u002Fh2>\n\n### How do I avoid repetition?\n\nSpecifying the same `loading` component or `delay` every time you use\n`Loadable()` gets repetitive fast. Instead you can wrap `Loadable` with your\nown Higher-Order Component (HOC) to set default options.\n\n```js\nimport Loadable from 'react-loadable';\nimport Loading from '.\u002Fmy-loading-component';\n\nexport default function MyLoadable(opts) {\n  return Loadable(Object.assign({\n    loading: Loading,\n    delay: 200,\n    timeout: 10000,\n  }, opts));\n};\n```\n\nThen you can just specify a `loader` when you go to use it.\n\n```js\nimport MyLoadable from '.\u002FMyLoadable';\n\nconst LoadableMyComponent = MyLoadable({\n  loader: () => import('.\u002FMyComponent'),\n});\n\nexport default class App extends React.Component {\n  render() {\n    return \u003CLoadableMyComponent\u002F>;\n  }\n}\n```\n\nUnfortunately at the moment using wrapped Loadable breaks [react-loadable\u002Fbabel](#babel-plugin) so in such case you have to add required properties (`modules`, `webpack`) manually.\n\n```js\nimport MyLoadable from '.\u002FMyLoadable';\n\nconst LoadableMyComponent = MyLoadable({\n  loader: () => import('.\u002FMyComponent'),\n  modules: ['.\u002FMyComponent'],\n  webpack: () => [require.resolveWeak('.\u002FMyComponent')],\n});\n\nexport default class App extends React.Component {\n  render() {\n    return \u003CLoadableMyComponent\u002F>;\n  }\n}\n```\n\n### How do I handle other styles `.css` or sourcemaps `.map` with server-side rendering?\n\nWhen you call [`getBundles`](#getbundles), it may return file types other than\nJavaScript depending on your Webpack configuration.\n\nTo handle this, you should manually filter down to the file extensions that\nyou care about:\n\n```js\nlet bundles = getBundles(stats, modules);\n\nlet styles = bundles.filter(bundle => bundle.file.endsWith('.css'));\nlet scripts = bundles.filter(bundle => bundle.file.endsWith('.js'));\n\nres.send(`\n  \u003C!doctype html>\n  \u003Chtml lang=\"en\">\n    \u003Chead>\n      ...\n      ${styles.map(style => {\n        return `\u003Clink href=\"\u002Fdist\u002F${style.file}\" rel=\"stylesheet\"\u002F>`\n      }).join('\\n')}\n    \u003C\u002Fhead>\n    \u003Cbody>\n      \u003Cdiv id=\"app\">${html}\u003C\u002Fdiv>\n      \u003Cscript src=\"\u002Fdist\u002Fmain.js\">\u003C\u002Fscript>\n      ${scripts.map(script => {\n        return `\u003Cscript src=\"\u002Fdist\u002F${script.file}\">\u003C\u002Fscript>`\n      }).join('\\n')}\n    \u003C\u002Fbody>\n  \u003C\u002Fhtml>\n`);\n```\n","React Loadable 是一个用于通过动态导入加载组件的高阶组件。它支持异步加载和代码分割，能够显著减少初始加载时间及主包体积。该库利用了 Webpack 的动态导入功能，并且兼容服务器端渲染（SSR），提供了简洁易用的API。适用于需要优化前端性能、改善用户体验的各种Web应用开发场景，尤其是对加载速度有较高要求的应用。","2026-06-11 02:53:16","top_language"]