-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Description
Version
3.0.1
Reproduction link
https://github.com/doits/vue-chunk-example
Node and OS info
Node 10.9.0 / yarn 1.9.4
Steps to reproduce
I have a app with two pages in vue.config.js:
module.exports = {
pages: {
public: {
entry: "src/main.js",
template: "public/index.html",
filename: "index.html",
title: "Index Page"
},
swagger: {
entry: "src/swagger.js",
template: "public/swagger.html",
filename: "swagger.html",
title: "Swagger"
}
}
}
public
is the main page and swagger
is just an empty page. What now happens in production ist:
public
has a lot of imports and therefore some common chunks are exported tochunk-vendors-[hash].{js,css}
, which is nice- but those common chunks are included in both pages,
public
andswagger
, even thoughswagger
does not use any of the common chunks at all (see swagger.html - it also imports the common chunks with bootstrap styles).
I'd think that there would be two "common chunks", one for each page. So those pages are really completely separated. Eg. (removed this, since this does not make sense)chunk-vendors-[pagename]-[hash].{js,css}
, which is only used on that page.
What makes this worse: You only see this in production. In development, common chunks are not applied, so everything works as expected, but when compiling it in production, the common chunks get applied and the result is different from development.
What is expected?
Make multiple common chunks, one per page.
What is actually happening?
Common chunks are global, and each page imports them, even when not needed.