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:

3D
12H
51M
57S
Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Code Splitting en desarrollo

17/22
Recursos

Aportes 4

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Code Splitting en desarrollo

Existe una clase del curso de Optimizaci贸n web que lo explica: clase.
Podemos ver que el code splitting es dividir el c贸digo, es beneficioso el uso que se le quiera dar, ya que se puede implementar de diferentes formas.
-------------- 驴Qu茅 hicimos en esta clase? ------------
1.- Creamos una carpeta Header dentro de src.
2.- Creamos dentro de Header:
- Un Archivo llamado index.js
- Una carpeta llamada components.
- Dentro de esa carpeta components se crea el archivo App.jsx
3.- en src/Header/components/App.jsx:

import React from 'react';

const App = () => {
    return (
        <h1>Hello React From Header</h1>
    );
}

export default App;

4.- en src/Header/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';


ReactDOM.render(<App />, document.getElementById('header'));

5.- en public > index.html:
A帽adimos e div con id : header

  <body>
    <div id="header"></div>
    <div id="app"></div>
  </body>
  • En webpack.config.dev.js:
    Modificamos entry y output:
module.exports = {
  entry: {
    home: './src/index.js',
    header: './src/Header/index,js',
  },
 .....
},
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
  },

y npm run start

por fin alguien habla de micro frontends. Module federation es una feature interesante de webpack para los micro frontends.

si tienen instalada la extension de snippets de react (ES7+ React/Redux/React-Native snippets) solo escriban rafce y enter, o tab para que se cree algo asi:

import React from 'react'

const App = () => {
  return (
    <div>App</div>
  )
}

export default App

en este caso aparece const App, <div>App</div> y export default App porque mi achivo se llama App.jsx, la extensi贸n reemplaza automaticamente ese valor seg煤n el nombre de tu archivo.

hola gente. estoy en b煤squeda de los mejores recursos para hacer codesplitting desde webpack. Si tienes alguno d茅jalo aqu铆 pls. en otras noticias, al parecer React.lazy y React.Suspense hacen code splitting manteniendo vac铆os los espacios hasta que son requeridos o: Es decir es Code Splitting desde React. Puedes cumplir el reto usando los pero a m铆 me interesa saber hacerlo desde webpack tambi茅n. C贸mo lo hace Oscar me genera muchos problemas, m谩s que nada en el la conexi贸n del estado y del router. Tambi茅n si recomiendan links de MicroFrontends estar铆a genial porque ese concepto y modo de trabajo no lo comprendo completamente.