Vue CLI 3 build outputs files with tilde "~"

Question

In my application I've created different components that share common UI components like AppButton, AppSelect etc. I'm using webpack's code splitting feature to lazy load components and get a separate chunk. Using Vue CLI 3 build command I get ready to deploy files in dist folder.

Does anyone know what tilde "~" means? For example, in dist folder I can find name like settings-diet~start-personalization.6e2ac313.js that contains tilde.

Answer 1

I'm using webpack's code splitting feature to lazy load components and get a separate chunk.

This is why: you are lazy-loading modules.

In this case it looks like one of two things is going on:

1. you have an entry settings-diet that somewhere in its tree requires a file start-personalization. Rather than the source code of this required file being included in the bundle settings-diet it is being extracted ("split") out of the main bundle to a separate file. This separate file can then be loaded only when it needs to be, i.e. lazily.

2. this file contains modules common to both the settings-diet and start-personalization entries.

The ~ character indicates that everything on its right has been extracted from whatever is on its left. The character used is configurable via the splitChunks.automaticNameDelimiter configuration property.

This is the work of the SplitChunksPlugin:

By default it only affects on-demand chunks, because changing initial chunks would affect the script tags the HTML file should include to run the project.

Answer 2

As of Webpack 4.2.0 the delimiter for the split chunk filenames can be configured through splitChunks.automaticNameDelimiter