Stop Vite from splitting out all shared components into separate modules?

[GabrielMahan]

So I'm still quite new to Vite, but trying it out in my rails app I'm seeing that Vite is separately bundling dependencies that are only shared by different entrypoints. To illustrate what I mean, imagine we two routes, /page_1 and /page_2 with corresponding page_1.js and page_2.js entrypoints.

page_1.js:

import A from "../components/A"
import B from "../components/B" 

page_2.js:

import B from "../components/B" 
import C from "../components/C" 

The result is that vite bundles A, B, and C separately, with the shared module B getting inserted as a modulepreload link in each page.

As the pages are mostly separate, ideally I'd like to have just one bundle per entrypoint so that page_1.js bundled (A + B) together and page_2.js bundled (B + C) together .

This problem doesn't really matter for small apps, but on a large app with lots of endpoints and shared components the separate modules quickly get out of hand. Eg I'm seeing one page that has over 70 separate modulepreloads loading separately and bogging down the browser when all I really need is a single bundle.

Is there a way to configure vite to bundle based on the needs of the entrypoint rather than the app as a whole? I know that that would create redundancies across bundles, but since the views are totally separate I'm fine with that.

[ElMassimo]

Hi Gabriel!

There are several options, and they all come from Rollup which is what Vite uses to create the bundle.

You can provide options for Rollup in rollupOptions in your vite.config.ts file.

You will want to check the manualChunks option, and Vite's default strategy for the vendor chunk.

There are plenty of articles about configuring Rollup, but you could also try asking in the Vite.js discord in the #build channel.

[PanosCodes]

It's more of a workaround that a scalable solution but you could have one vite instance and config, for each entrypoint.

You can use the VITE_RUBY_CONFIG_PATH env variable to achieve that.

1. Create a vite.rb with the following inside

ViteRuby.env['VITE_RUBY_CONFIG_PATH'] = ENV['VITE_RUBY_CONFIG_PATH']

2. In your Procfile.dev you could have following processes

vite_page_1_watch: VITE_RUBY_CONFIG_PATH=config/vite/page_1.json vite build --watch
vite_page_2_watch: VITE_RUBY_CONFIG_PATH=config/vite/page_1.json vite build --watch

3. Create config files for each entrypoint, for example for page_1 you will have config/vite/page_1.json

{
  "all": {
    "sourceCodeDir": "app/frontend",
    "entrypointsDir": "entrypoints/page_1"
  },
  "development": {
    ....
  },
  "test": {
    ....
  }
}

4. Create a directory for each entrypoint and place your file there.