https://github.com/gregberge/loadable-components

The recommended Code Splitting library for React ✂️✨
https://github.com/gregberge/loadable-components

code-splitting dynamic-import react react-async-component react-loadable react-router server-side-rendering ssr webpack

Last synced: about 7 hours ago
JSON representation

The recommended Code Splitting library for React ✂️✨

• Host: GitHub
• URL: https://github.com/gregberge/loadable-components
• Owner: gregberge
• License: mit
• Created: 2017-06-23T07:51:02.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-20T07:11:41.000Z (9 months ago)
• Last Synced: 2024-10-29T17:38:19.689Z (3 months ago)
• Topics: code-splitting, dynamic-import, react, react-async-component, react-loadable, react-router, server-side-rendering, ssr, webpack
• Language: JavaScript
• Homepage: https://loadable-components.com
• Size: 8.05 MB
• Stars: 7,674
• Watchers: 49
• Forks: 380
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Support: .github/SUPPORT.md

Awesome Lists containing this project

• awesome-react-cn - loadable-components - React code splitting made easy (Uncategorized / Uncategorized)
• awesome - gregberge/loadable-components - The recommended Code Splitting library for React ✂️✨ (JavaScript)
• awesome-web - loadable-components - loadable](https://github.com/jamiebuilds/react-loadable) | ([React](https://github.com/facebook/react/))
• Algorithms-Cheatsheet-Resources - The recommended Code Splitting library for React ✂️✨
• awesome-list - loadable-components
• best-of-react - GitHub - 5% open · ⏱️ 20.04.2024): (Developer Tools)
• awesome-react - loadable-components - The recommended Code Splitting library for React (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
• awesome-star-libs - gregberge / loadable-components

README

        


  



React code splitting made easy. Reduce your bundle size without stress ✂️✨.


[![License](https://img.shields.io/npm/l/@loadable/component.svg)](https://github.com/gregberge/loadable-components/blob/master/LICENSE)

[![npm package](https://img.shields.io/npm/v/@loadable/component/latest.svg)](https://www.npmjs.com/package/@loadable/component)

[![npm downloads](https://img.shields.io/npm/dm/@loadable/component.svg)](https://www.npmjs.com/package/@loadable/component)

[![Build Status](https://img.shields.io/travis/gregberge/loadable-components.svg)](https://travis-ci.org/gregberge/loadable-components)

![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

[![Dependencies](https://img.shields.io/david/gregberge/loadable-components.svg?path=packages%2Fcomponent)](https://david-dm.org/gregberge/loadable-components?path=packages/component)

[![DevDependencies](https://img.shields.io/david/dev/gregberge/loadable-components.svg)](https://david-dm.org/gregberge/loadable-components?type=dev)

[![Small size](https://img.badgesize.io/https://unpkg.com/@loadable/component/dist/loadable.min.js?compression=gzip)](https://unpkg.com/@loadable/component/dist/loadable.min.js)

```bash

npm install @loadable/component

```

## [Docs](https://loadable-components.com)

**See the documentation at [loadable-components.com](https://loadable-components.com)** for more information about using Loadable Components!

Quicklinks to some of the most-visited pages:

- [**Getting started**](https://loadable-components.com/docs/getting-started/)

- [Comparison with React.lazy](https://loadable-components.com/docs/loadable-vs-react-lazy/)

- [Server Side Rendering](https://loadable-components.com/docs/server-side-rendering/)

## Example

```js

import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

function MyComponent() {

  return (

    


      

    

  )

}

```


## Supporting Loadable Components

Loadable Components is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:

- [Sponsor me on GitHub ❤️](https://github.com/sponsors/gregberge).

## License

Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See [LICENSE](./LICENSE) for more information.