Skip to content

Config for "manualChunks" not making it to Vite #1571

@jp-simons

Description

@jp-simons

Describe the bug
If you put something like this in your svelte config file, the manualChunks never make it to Vite because rollupOptions.output isn't spread in.

kit: {
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {}

Why does that matter?

The vendor chunk logic comes from Vite here, and that might not always be what you want. That logic just takes the NPM dependencies for all your entry points and throws them into one vendor chunk. In my case I'm using D3 to make some graphs on my index route, but I'd like to not have all the other pages pay that JS download price on initial load.

There's an easy fix mentioned in vitejs/vite#1683 but that doesn't work for SvelteKit at the moment because the output options are just overridden.

If we can set the manualChunks option we have a lot of flexibility. We can set to empty object to simply delete the vendor chunk concept, or if I had multiple pages using D3 and wanted shared cacheability I could make a manual D3 chunk like:

manualChunks: {
  d3: [
    'd3-array',
    'd3-shape',
    'd3-scale',
  ]
}

Pull request to come shortly on this, it's a simple one-liner.

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