react-eager-import

Utilty libary to pre load/import modules

Eager vs Lazy Loading

Eager loading is importing your module(s) ahead of time (before you need them). This differs from lazy loading which requests the module only on render. Thus eager loading can be really useful if you know some modules will probably be used soon.

Good use of eager loading can give you accelerated first load time (by code-splitting) and continuous fast responses for the rest of your site.

Bad use of eager loading can cause redundant use of network for your users.

Install

npm install --save react-eager-import

Usage

import { eagerImport, eagerImportDefault } from 'react-eager-import'

// These are loaded immediately!!!
const { Component2 } = eagerImport(() => import('./Components'))
const DefaultComponent = eagerImportDefault(() => import('./DefaultComponent'))

// This is loaded when you are trying to render it
const Component3 = lazy(() => import('./Component3'))

then you can use normal React Suspense syntax:

import React, { Suspense } from 'react'

const App = () => (
  <Suspense fallback={'loading...'}>
    <Component />
  </Suspense>
)

License

MIT © hayke102