Is it possible to use glob patterns with chunk names? How to preload specific chunks?

[milky2028]

trafficstars

I'm attempting to preload initial chunks, as well as some worker scripts using webpack chain in Vue, but I'm struggling to get it to work. Is there something I'm missing here?

    if (config.plugins.has('preload')) {
      config.plugin('preload').tap((options) => {
        options[0] = {
          rel: 'preload',
          include: {
            chunks: ['*.worker.js'],
            type: 'initial'
          },
          fileBlacklist: [/\.map$/, /hot-update\.js$/]
        };
        return options;
      });
    }

[morr]

@milky2028 did you find any solution?

[milky2028]

@morr Unfortunately I did not. My solution was to switch to Rollup and use that for my entire build. Much easier to work with.

[morr]

@milky2028 Well, I already found solution. Here is my working example

    config.plugin('preload').tap(options => {
      options[0].include = {
        type: 'allChunks',
        chunks: ['app', 'chunk-vendors', 'landing', 'landing-styles']
      };
      return options;
    });

Chunks filtering is done by the function https://github.com/vuejs/preload-webpack-plugin/blob/master/src/lib/extract-chunks.js#L51

So I run vue-cli serve with debugger node --inspect-brk ./node_modules/.bin/vue-cli-service serve spend few minutes to see how extractChunks works, and it became obvious what options should be passed there to get the result I want.

[tomchen]

Not sure if this can solve your problem but in case anyone needs it, here's the config that can include everything then use fileBlacklist as a white list to include png and jpeg files:

include: 'all',
fileBlacklist: [/\.(?!(png$|jpe?g$)).*$/],