chrisvfritz / prerender-spa-plugin

Prerenders static HTML in a single-page application.
MIT License
7.32k stars 634 forks source link

Vue Prerender-SPA / Webpack - Application won't initialise with named cacheGroups unless explicitly listed in pages config chunks section? #479

Open owlyowl opened 2 years ago

owlyowl commented 2 years ago

I've been beating my head against the webpack/vue-cli wall for the last few days so thought I'd reach out.

I have a pages config setup like so:

publicPath: '',
outputDir: 'dist',
pages: {
            index: {
                entry: 'src/entry.ts',
                template: 'public/entry.html'
            }
        }

I've chunked out some named cacheGroups so I can group some modules which were commonly being duplicated across chunks:

 configureWebpack: {
        output: {
            filename: 'js/index.js',
            chunkFilename: 'js/[name].[contenthash:8].js'
        },
        resolve: {
            alias: {
                vue$: path.resolve('./node_modules/vue/dist/vue.runtime.esm.js')
            }
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    libraries: {
                        name: 'common-lib',
                        test: /[\\/]node_modules[\\/]@mycommonlib[\\/].*/
                    },
                    default: false,
                    common: false,
                    vue: {
                        name: 'vue-core',
                        test: /[\\/]node_modules[\\/](vue|vue-class-component|vue-property-decorator)[\\/]/,
                        chunks: 'all'
                    },
                    vuei18n: {
                        name: 'vue-translation',
                        test: /[\\/]node_modules[\\/]vue-(i18n|translate-plugin)/,
                        chunks: 'all'
                    }
                }
            }
        }
    }

I'm trying to run a few routes up in puppeteer using the PrerenderSPAPlugin. It works flawlessly if I omit the optimization.splitChunks section from my config. The minute I include it, Puppeteer will hang up and never initialise my application.

The only way I seem to be able to get it to run anything at all is if I manually include all my named chunks in the page config (which then defeats the purpose of Vue/webpack loading in chunks as/when needed:

e.g:

pages: {
            index: {
                entry: 'src/entry.ts',
                template: 'public/entry.html',
                chunks: ['common-lib', 'vue-translation', 'vue-core', 'index']
            }
        },

I've been scouring the Webpack and Vue documentation with little/no luck.