How to speed up your app

Load what's absolutely needed at the beginning of the page load. The rest can be loaded on-demand.

import React from 'react'

// remove this import
import OnDemand from '../ondemand'

add React.lazy

import React from 'react'

const OnDemand = React.lazy(()=> import('../ondemand'))

and React.Suspense component higher up in the tree

 <React.Suspense fallback={<div>loading...</div>}>
          {showOnDemand ? <OnDemand /> : null}
 </React.Suspense>

If you’re using webpack to bundle your application, then you can use webpack magic comments to have webpack instruct the browser to prefetch dynamic imports.

const OnDemand = React.lazy(() => import(/* webpackPrefetch: true */ '../ondemand'))

We could have OnDemand start loading as soon as the user hovers over the element.

const loadOnDemand = () => import('../ondemand')
const OnDemand = React.lazy(loadOnDemand)

<label  onMouseEnter={loadOnDemand} onFocus={loadOnDemand} >
// our element
</label>

Next.js

Next.js supports ES2020 dynamic import() for JavaScript. With it, you can import JavaScript modules dynamically and work with them. They also work with SSR.

<input
...
        onChange={async (e) => {
          ...
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)
          ...
        }}
      />

// remove this import
import { javascript } from "@codemirror/lang-javascript"

// add this where needed access to {javascript}
const javascript = (await import("@codemirror/lang-javascript")).javascript;

Dynamically import the Hello component with loading component:

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

With no server-side rendering:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Lazy Loading components with React-Loadable

React-Loadable - a higher-order component for dynamically loading a module before rendering it, a loading component is rendered while the module is unavailable.

npm i react-loadable

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

// ...
// ...

    return <LoadableComponent/>

Use only what you need

For example,

import _ from 'lodash'

change to:

import transform from 'lodash/transform'

OR in this case, you can use the Babel plugin for lodash.

In your .babelrc :

"plugins": [
"lodash"
]