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.

Importación dinámica de Laravel-mix 6

12 Jun, 2023 Programación

Por favor, ayúdame a averiguar por qué la importación dinámica no funciona. Todo está recopilado en un solo archivo js.

  • “laravel-mix”: “^6.0.39”
  • “@babel/plugin-syntax-dynamic-import”: “^7.8.3
let chunkName = mix.inProduction() ? 'js/chunks/[name].[chunkhash].js' : 'js/chunks/[name].js?id=[chunkhash]';

<pre><code>mix.js('resources/js/app.js', 'public/js')
        .vue()
        .sass('resources/sass/app.scss', 'public/css')
        .webpackConfig({
            output: {
                chunkFilename: chunkName,
                publicPath: '/',
            }
        })
        .babelConfig({
            plugins: ['@babel/plugin-syntax-dynamic-import'],
        })
        .extract(['vue', 'lodash', 'axios', 'vue-router', 'vuex', 'bootstrap-vue', 'luxon'])
        .options({
            watchOptions: {
                ignored: /node_modules/
            },
        })
        .version(); 
</code></pre>

<code>
En las rutas
</code> 
function route(path, view, name, middleware) {
    if(!middleware) {
        middleware = ['auth'];
    }
    return {
        name: name || view,
        path: path,
        meta: {
            middleware: middleware,
        },
        component: () => import(/* webpackChunkName: "[request]" */<code>../pages/${view}</code>)
    }
}

Pero la salida siempre es solo 3 archivos

app.js
vendor.js
manifest.js
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el código proporcionado, parece que la importación dinámica está configurada correctamente. Sin embargo, el problema podría deberse a que se utiliza el método extract, que recopila módulos específicos en un archivo separado “vendor”. Esto podría estar causando que los fragmentos deseados no se incluyan en el archivo de salida final.

    Una posible solución sería eliminar la llamada al método extract y en su lugar utilizar la opción de optimización de webpack splitChunks, que permite un control más detallado sobre la división de código. Por ejemplo:

    mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: {
            chunkFilename: 'js/chunks/[name].[chunkhash].js',
            publicPath: '/',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendor',
                        chunks: 'all',
                    },
                },
            },
        },
    })
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .options({
        watchOptions: {
            ignored: /node_modules/,
        },
    })
    .version();

    Con esta configuración, se define la opción splitChunks para buscar módulos en node_modules, nombrar el fragmento extraído como “vendor” e incluirlo en todos los fragmentos (es decir, all). Esto permitirá una división de código más eficiente mientras se habilitan las importaciones dinámicas.

Comments are closed.