Laravel mix [chunkhash] file not found in main blade file

user_5701010 0
Viewed 519

I was using dynamic component using vue router. Recently i noticed that my vendor file is also causing loading issue. My vendor file size is 4mb+ and in prod is 2mb+ Followed the tutorial So, i wanted to use "Bundle splitting": For that i changed my mix config:

    const path = require("path");
    mix.webpackConfig({
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/js/")
            }
        },
        output: {
            filename: 'js/vue/[name].js',
            chunkFilename: 'js/vue/[name].[chunkhash].js'
            // chunkFilename: mix.inProduction() ? "js/front/chunks/[name].[chunkhash].js" : "js/front/chunks/[name].js",
            //filename: '[name].[chunkhash].js',
            // path: path.resolve(__dirname, 'dist'),

        },
        optimization: {
            splitChunks: {
                 minSize: 10000,
                 maxSize: 250000,
            }
        },
----

But when i use splitChunks it makes my vendor file like vendor~cd45250bd7e543e7b708.js And other chunk file also like: 108.4bcdcd35199c4fd01198.js But in my main blade file previously i linked path like:

<script src="{!! asset('js/vue/manifest.js') !!} "></script>
{!! Html::script('js/vue/vendor.js') !!}
{!! Html::script('js/vue/app.js') !!}

Now the vendor.js and app.js not found as they are now on chunkhashed naming. How can i add my vendor chunkhashed file in main blade file ? My package.json:

 "devDependencies": {
        "axios": "^0.18.0",
        "cross-env": "^5.1",
        "laravel-mix": "^4.1.4",
        "laravel-mix-bundle-analyzer": "^1.0.2",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.26.3",
        "sass-loader": "^7.3.1",
        "vue": "^2.6.11",
        "webpack-bundle-analyzer": "^3.5.2"
    },

Thanks in advance.

laravel-mix laravel vue.js
1 Answers

Check out if u can use https://github.com/spatie/laravel-mix-preload, on my project I can't use it, so I came up with the following, surely not the best, but I haven't found a better solution that worked for me. It replaces the hashes in the mix-manifest.json, so u should a wrap a if (mix.inProduction()) around it.

mix.then((stats) => {
    const file = 'public/mix-manifest.json';
    const fs = require('fs');
    fs.readFile(file, 'utf8' , (err, data) => {
        if(err) throw err;
        const identifier = '#YOURFILEPATH#';
        for (let file of Object.keys(stats.compilation.assets)) {
            if (file.indexOf(identifier) == -1) {
                continue;
            }
            let correctHash = file.split(identifier)[1].slice(0,20);
            data = data.replace(data.split(identifier+'?id=')[1].slice(0,20), correctHash);
        }
        fs.writeFile(file, data, function(err) {
            err || console.log('Hashes changed \n', data);
        });
    });
});
user_105669800
Related