Skip to content

sentryVitePlugin creates unnecessary JS modules for each index page #829

@medmunds

Description

@medmunds

In a vite multi-page app, sentryVitePlugin causes "vite build" to emit a separate, unique, unexpected JS module for each index page.

Environment

@sentry/vite-plugin 4.6.1
vite 7.3.0

Steps to Reproduce

Here is a minimal-example.zip that reproduces the issue.

Or:

  1. Create a simple vite MPA with a few index pages:

    // vite.config.js
    import {sentryVitePlugin} from "@sentry/vite-plugin";
    import {defineConfig} from "vite";
    
    export default defineConfig({
      appType: "mpa",
      build: {
        rollupOptions: {
          input: ["index.html", "page1.html", "page2.html"],
        },
      },
      plugins: [
        // Enable this to reproduce the bug:
        // sentryVitePlugin({}),
      ],
    });

    In my example, index.html has no scripts, and page1.html and page2.html both load the same shared module:

     <script type="module" src="/src/shared-module.js"></script>

    (It doesn't matter what code is in shared-module.js. The sentryVitePlugin options don't seem to affect the results, and can be empty as shown above.)

  2. First run "vite build" without sentryVitePlugin and examine the output:

    % ls -1 dist/assets
    shared-module-DLkOR36O.js
    
    % grep module dist/*.html
    dist/page1.html:  <script type="module" crossorigin src="/assets/shared-module-DLkOR36O.js"></script>
    dist/page2.html:  <script type="module" crossorigin src="/assets/shared-module-DLkOR36O.js"></script>
  3. Uncomment the sentryVitePlugin in vite.config.js and repeat the "vite build". Compare the output:

    % ls -1 dist/assets
    index-CrvgSmxQ.js
    page1-DOS8u50U.js
    page2-DOS8u50U.js
    shared-module-B_F8-UTR.js
    
    % grep module dist/*.html
    dist/index.html:  <script async type="module" crossorigin src="/assets/index-CrvgSmxQ.js"></script>
    dist/page1.html:  <script type="module" crossorigin src="/assets/page1-DOS8u50U.js"></script>
    dist/page1.html:  <link rel="modulepreload" crossorigin href="/assets/shared-module-B_F8-UTR.js">
    dist/page2.html:  <script type="module" crossorigin src="/assets/page2-DOS8u50U.js"></script>
    dist/page2.html:  <link rel="modulepreload" crossorigin href="/assets/shared-module-B_F8-UTR.js">

Expected Result

The sentryVitePlugin should add metadata to generated modules (like shared-module-[hash].js in the example), but should not rework the import graph, create new modules, or add script tags to pages that didn't have them in the first place.

Actual Result

A unique module is generated for every html page in rollup.options.input. Pages that had been sharing modules will instead load a page-specific module that imports the shared code. Pages that didn't contain any scripts will now have one.

These unnecessary scripts slow page loading and interfere with caching.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions