Howto optimize webpack chunking with vue.config.js to speed up gitlab build time

Question

My original configuration in vue.config.js using the default chunking strategy, which takes about 5 minutes to build locally and 35 minutes in gitlab pipeline, and results in one chunk being > 50MB and several other large chunks(see screenshot)

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  publicPath: process.env.PUBLIC_PATH || '/',
  configureWebpack: {
  },
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },


      visualform: {
        entry: "src/visualform/main.js",
        template: "public/visualform.html",
        filename: "visualform.html",
        chunks: ["chunk-vendors", "chunk-common", "visualform"],
      }
  }
};

So after having a read of the webpack docs i thought i'd use the following updated config to try and reduce the chunk size

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  publicPath: process.env.PUBLIC_PATH || '/',
  configureWebpack: {
        plugins: [
            new webpack.optimize.AggressiveSplittingPlugin({
                minSize: 20000,
                maxSize: 200000,
            }),
        ],
  },
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },


      visualform: {
        entry: "src/visualform/main.js",
        template: "public/visualform.html",
        filename: "visualform.html",
        chunks: ["chunk-vendors", "chunk-common", "visualform"],
      }
  }
};

which results in the following reduced chunk size, but appears to break the app(there is no more index.js and visualform.js present, i also tried having an output section in configureWebpack with filename, but made no difference)

When i access the app through the browser i get a blank page and the following in console

A bunch of messages like this:

The resource http://localhost:3000/js/379.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

I've also tried doing a split chunk optimization in configure webpack to try and overide the default chunking of vue cli service:

configureWebpack: {
optimization: {
splitChunks: {
                cacheGroups: {
                       chunks: 'all',
                      minSize: 20000,
                      maxSize: 200000,
                      maxInitialRequests: Infinity,
                    'chunk-vendors': {
                        test: /[\\/]node_modules[\\/]/,
                         name(module) {
        
                           const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                          
                           return `npm.${packageName.replace('@', '')}`;
                         },
                      chunks: 'all',
                      priority: -10,
                      maxAsyncRequests: 6,
                      maxInitialRequests: 4,
                      minChunks: 2,
                      minSize: 20000,
                      maxSize: 200000,
                      reuseExistingChunk: true,
                      enforce: true
                    },
                     'chunk-common': {
                       name: 'chunk-common',
                       test: path.resolve('src/components'), 
                       chunks: 'all',
                       minChunks: 3, //  minimum common number
                       minSize: 20000,
                       maxSize: 250000,
                       priority: 5,
                       reuseExistingChunk: true,
                     }
               }
            }
    }
}

But this strategy results in the same blank page, no entry point visualform.js and main.js pages being generated, and associated warnings in console

The resource http://localhost:3000/js/npm.element-ui~._node_modules_element-ui_lib_t.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Any help would be much appreciated. The chunking reduces the build time in gitlab pipeline by about 65%, so if i can get it working will minimize this bottleneck.

I'm a bit of a webpack noob and have been reading the docs, but there are a lot of config options, so i've probably missed something.

Thanks in advance.

robbyc73 · Accepted Answer · 2022-09-13 01:43:52Z

0

Identified which component was the largest chunk and applied dynamic loading to the imported components within as per the docs here https://router.vuejs.org/guide/advanced/lazy-loading.html

This reduced my build time in gitlab pipeline to around 9 minutes

answered Sep 13, 2022 at 1:43

robbyc73

231 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Howto optimize webpack chunking with vue.config.js to speed up gitlab build time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related