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.

Jerilynjeritah

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.

Adenoma

Thanks for detailed answer. It's strange because settings-diet and start-personalization are totally different components, using different routes without any common stuff. That's why I'm wondering why webpack created this file with tilde. Anyway, I will read more about split chunks plugin and try to find the reason. – Jerilynjeritah

@Jerilynjeritah Look in the file and see what it contains. Given what you've said it may just contain modules common between the settings-diet and start-personalization modules. – Adenoma

I've seen a lot of mess inside the file but mange to find the common chunk, thanks! :) – Jerilynjeritah

Answer 2

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

Diatonic

Thanks for the info, but the delimiter name is fine for me. Just wondering why this file with tilde has been created? Is it something connected betweend components (SettingsDiet and StartPersonalization)? – Jerilynjeritah