Upon reviewing the page load performance with Lighthouse, I discovered that the vendor.js file is a whopping 5MB and lacks dead code elimination. Despite using dynamic imports for components, the size of the vendor.js file remains unexpectedly large, indicating that there may be an issue in my implementation.
Here's an example of how I'm dynamically importing components:
const app = new Vue({
vuetify,
el: '#app',
components: {
'currency-converter': () => import(
/* webpackChunkName: "components/js/Assets/Menu/Currency" */
'./components/Assets/Menu/Currency.vue'
),
...
When inspecting the network tab during page load, I noticed that each component and the vendor.js file are being loaded individually, resulting in the oversized 5MB file. It seems that dead code elimination is not functioning properly, leading to unnecessary bloat.
This is what my mix.js file currently looks like:
mix.js('resources/js/admin.js', 'public/js').js('public/assets/admin/main.js', 'public/js')
.js('resources/js/app.js', 'public/js').vue().vuetify('vuetify-loader')
.sass('resources/sass/admin.scss', 'public/css')
.css('public/assets/css/main.css', 'public/css')
.webpackConfig({
output: {
publicPath: '/',
chunkFilename: '[name].js?id=[contenthash]',
},
plugins: [
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /en-gb|el/),
new NodePolyfillPlugin()
],
});
mix.extract();
if (mix.inProduction()) {
mix.version();
}
Despite searching for solutions, I have yet to find a satisfactory way to address this issue efficiently.