Importación dinámica de Laravel-mix 6
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
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 webpacksplitChunks
, que permite un control más detallado sobre la división de código. Por ejemplo:Con esta configuración, se define la opción
splitChunks
para buscar módulos ennode_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.