Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de Webpack

Curso Práctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Lazy Loading

16/22
Recursos

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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