Code Splitting en desarrollo

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 4

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Paolo Joaquin Pinto Perez

hace 2 años

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

Alvaro

hace un año

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

Rodrigo Andre Gutierrez

hace 4 meses

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.

Adrian Garcia

hace 2 años

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.

Si ya tienes una cuenta,

Curso Práctico de Webpack

Code Splitting en desarrollo

Code Splitting en desarrollo