Skip to content
This repository was archived by the owner on Apr 9, 2023. It is now read-only.
This repository was archived by the owner on Apr 9, 2023. It is now read-only.

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

Description

@owlyowl

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions