How to break the js files into chunks in vue cli 3 with webpack performance object?

The following added to my vue.config.js file is what finally chunked all my vendor assets when executing npm run build for my @vue/cli project (version 3.0.4).

module.exports = {
  configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

Hide warnings

module.exports = {
  configureWebpack:{
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

You misunderstand the settings that you changed, probably because you misread the issu comment that you linked to.

Those are not limits that tell webpack how/when to split a chunk, they only define limts above which the warning is displayed in the console, that's all.

What you really want is to change the settings for splitChunks. Unfortunately that option an be pretty complicated to set up for a beginner, so I would recommend this article to get a better understanding of how it actually works.

However what this article doesn't cover is that in recent versions, a new exerimental option was added to splitChunks: maxSize.

It should work something like this:

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

Keep in mind it's experimental, so the more reliable way would be to config splitchunks to create chunks that don't exceed your size limit by manually putting different dependencies into different chunks with splitChunks.cacheGroups.