Wednesday, 12 April 2023

Minify vendor.js file in Laravel Mix

I'm trying to optimize the page load and after doing a lighthouse review i found out that vendor.js file is 5MB and doesn't use dead code elimination, although, I'm using dynamic imports, so vendor.js file should be smaller, obviously I'm doing something wrong.

I'm dynamically importing components like below:

const app = new Vue({
    vuetify,
    el: '#app',
    components: {
        'currency-converter': () => import(
          /* webpackChunkName: "components/js/Assets/Menu/Currency" */ 
          './components/Assets/Menu/Currency.vue'
        ),
...

When loading the page i can see that each component gets loaded when inspecting the network tab, the vendo.js file also gets loaded and it's 5MB where that shouldn't be the case when i dynamically import each component, so i should eliminate the dead code which is not getting used somehow.

My mix.js file:

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();
    }

I looked for resources but I haven't found out how to do this properly.



from Minify vendor.js file in Laravel Mix

No comments:

Post a Comment