CODEWITHSUNDEEP
vue.jswebpack
Manu Mora
Manu Mora

Reputation: 332

A bunch of bundle files generated due to shared components

I am currently migrating a web application based in jQuery to Vue.js. To do it progressive, I am creating a different app per each module.

After build the code, there is a common file:

assets/js/vendors.d2c6c799.js

And each app has its own file:

assets/js/admin/dashboard.5c4be0d8.js
assets/js/admin/users.5c4be0d8.js
assets/js/alerts/main.5c4be0d8.js
.....

Up here everything perfect. The problem is that if those applications use same general components, another files are generated like:

assets/js/admin/dashboard~users/users.c3cbae3a.js
assets/js/admin/users~main/users.c3cbae3a.js
assets/js/alerts/dashboard~main/dashboard.c3cbae3a.js
assets/js/alerts/users~main/main.c3cbae3a.js
.....

That is a bit annoying and confused. I would like to each application has their own files, or all shared components in the same js file, but not generate a bunch of js files like in the above example. Is that possible? Thanks in advance.

Upvotes: 1

Views: 19

Answers (1)

sdgluck
sdgluck

Reputation: 27247

Since webpack 4 configs automatically split shared modules out into their own chunks.

You can change this behaviour via the optimization.splitChunks configuration property (docs).

To disable the default splitting behaviour altogether set the default and vendor cache groups to false:

optimization: {
    splitChunks: {
        cacheGroups: {
            default: false,
            vendor: false,
        }
    }
}

Upvotes: 1

Related Questions