No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
18H
56M
36S
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?

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