es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

División de código de Webpack 4 no funciona con React.lazy.

19 Jul, 2023 Programación

Hola a todos, estoy usando webpack 4 y tengo problemas con la división del código. Tengo un archivo main.js que necesita importar 5 componentes que también deben dividirse y cargarse de forma diferida con react-router. Ahora, cada uno de los componentes tiene su propio directorio en el código fuente con un archivo index.js (que exporta el componente como exportación por defecto) como archivo principal de exportación y también es el archivo que estoy importando en main.js para cada uno de los 5 componentes. Estoy utilizando la carga diferida para estos 5 componentes con React.lazy, pero por alguna razón, todos se agrupan en el mismo fragmento, por ejemplo – packs/js/index.chunk.js. Pero cuando cambio el nombre del archivo de exportación principal (index.js) a algo diferente para cada uno de los 5 componentes y el nombre del archivo también es único para cada componente, entonces la carga diferida funciona. Lo que quiero es mantener el mismo nombre de archivo que el index.js para cada uno de los componentes y lograr la carga diferida.
Intenté con comentarios mágicos como los siguientes, pero no tuve éxito con ello.

const x1 = lazy(() => import(/* webpackChunkName: "x1" */ './x1'));

A continuación se muestra la configuración de webpack:

optimization: {
    concatenateModules: false,
    splitChunks: {
        chunks(chunk) {
            return true;
        },
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: Infinity,
        maxInitialRequests: Infinity,
        automaticNameMaxLength: 30,
    },
},
output: {
    filename: 'js/[name].[chunkHash:6].js',
    chunkFilename: 'js/[name].[chunkHash:6].chunk.js',
    publicPath: `${process.env.CDN_HOST}/packs/`,
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el problema de code-splitting en webpack 4

    Si estás enfrentando problemas con el code-splitting en webpack 4, y quieres mantener el mismo nombre de archivo que index.js para cada uno de los componentes y lograr lazy-loading, puedes probar el siguiente enfoque:

    1. Cambia el formato de exportación de cada componente de exportación por defecto a exportación con nombre. Por ejemplo, en lugar de exportar el componente como exportación por defecto en el archivo index.js, puedes exportarlo utilizando una exportación con nombre de esta manera:

    export const ComponentName = () => {}

    1. Cambia las declaraciones de importación en tu archivo main.js de importación por defecto a importación con nombre. Por ejemplo, en lugar de importar el componente como importación por defecto de esta manera:

    import ComponentName from './components/ComponentName'

    puedes importarlo utilizando una importación con nombre de esta manera:

    import { ComponentName } from './components/ComponentName'

    1. Utiliza React.lazy y React.Suspense para lazy-loading de los componentes, de la siguiente manera:

    const ComponentName = React.lazy(() => import('./components/ComponentName'))

    “`<react.suspense fallback=””></react.suspense>

    Loading…

    }>“`

    <componentname></componentname>

    “““

    1. Utiliza comentarios mágicos para webpackChunkName de esta manera:

    const ComponentName = React.lazy(() => import(/* webpackChunkName: "ComponentName" */ './components/ComponentName'))

    Este enfoque debería ayudarte a lograr el code-splitting mientras mantienes el mismo nombre de archivo para el archivo index.js de cada componente.

Comments are closed.