Lazy Loading

Lazy Loading

Este es una funcionalidad muy importante y funcional al momento de optimizar nuestra aplicación o página web.
Aqui esta una clase del curso de Optimizacion web que habla más a profundidad acerca del Lazy Loading: Clase
Hay un Curso en Platzi de Optimización Web que se los recomiendo mucho, ya que se puede ver como podemos, por ejemplo, ahorrar dinero optimizando nuestra web app, landing page, etc.
Link: Curso de Optimización Web

----------- ¿Qué hicimos en esta clase ? ------------
En routes > App.jsx:
Actualizamos nuestra importacion de react(la primera).

import React, { Suspense } from 'react';

Después de los imports agregamos el siguiente código:

import .....
const AsyncCheckoutContainer = React.lazy(() => {
  import("@containers/Checkout")
});

Y el template debe quedar así:

  return (
    <>
    {isEmpty > 0 ? (
        <Suspense fallback={<div>Loading...</div>}>
        <AppContext.Provider value={initialState}>
        <BrowserRouter>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/checkout" component={AsyncCheckoutContainer} />
              <Route component={NotFound} />
            </Switch>
          </Layout>
        </BrowserRouter>
        </AppContext.Provider>
        </Suspense>
      ) : <h1>Loading ...</h1>}
    </>
  )

En webpack.config.dev.js deshabilitar hot-reload temporalmente:
Debe quedar algo así

module.exports = {
  entry: ['./src/index.js'], 
  .....
}

Y en devServer comentamos hot:

  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3005,
    // hot: true,
  },

añadimos después de plugins:

plugins: [
....
],
 optimization: {
   splitChunks: {
     chunks: 'all',
   },
 },

y en el output(en el comienzo de nuestro objeto):
(Cambiamos el filename)

    filename: '[name].bundle.js',

y npm run start para probar.

Mi solucion para la ultima version de react-router-dom