Skip to content

Common chunks not separated per page, production is different from development #2381

@doits

Description

@doits

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 to chunk-vendors-[hash].{js,css}, which is nice
  • but those common chunks are included in both pages, public and swagger, even though swagger 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. chunk-vendors-[pagename]-[hash].{js,css}, which is only used on that page. (removed this, since this does not make sense)

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions