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

Question

I have done a project using vue cli v3. After building the project I saw 2 warnings i.e.

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  js/chunk-vendors.2557157d.js (474 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

  app (617 KiB)

      js/chunk-vendors.2557157d.js

      css/app.821fcb13.css

      js/app.b5a47a94.js

Now upon inspection I saw that if I add the following in webpack config

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

then it will automatically break the js files into small chunks. Now in vue cli 3 there is no webpack.config file.

So, if you can please guide how to implement this so that files get auto chunked when it crosses some limit, it will be really helpful.

This is where I saw it: https://github.com/webpack/webpack/issues/3486#issuecomment-397915908

Looking forward to your reply.

P.S.: I've read this and tried creating the vue.config.js file and added the following inside the file

module.exports = {
  configureWebpack: {
    performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
    }
  }
}

But it didn't do anything. Can anyone please help to let me know what should I do to make sure my js file chunks do not cross the recommended size by vue?

Update

As per the answer by Linus Borg I tried putting both of the following codes in the vue.config.js file. Try 1:

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

and Try 2:

module.exports = {
  configureWebpack: {
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
  }
}

After both of then when I built my project for production. I saw the same warning, without changing any size: https://i.imgur.com/7Hp7SXC.jpg It seems none of them are affecting any changes. Any help?

Solution 1

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,
      }
    }
  }
}

Solution 2

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.