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.
Want to see more contributions, questions and answers from the community?