Assets (scripts) double loading

[miirinjej]

Describe the bug

When we use code splitting via dynamic import like this:
const routes = [
...
component: () => import('Projects.vue')
...
And we go to the page "Projects" app loaded component twice with different referers in production build.

Reproduction

https://github.com/miirinjej/vite-assets-double-loading

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.10 Arch Linux
    CPU: (4) x64 AMD Ryzen 3 2200G with Radeon Vega Graphics
    Memory: 4.15 GB / 13.65 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /usr/bin/node
    npm: 7.6.1 - /usr/bin/npm
  Browsers:
    Firefox: 85.0
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.1.5 
    vite: ^2.1.2 => 2.1.2

Used package manager:
npm

Logs

  vite:config bundled config file loaded in 109ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: false,
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/home/miirinjej/dev/projects/vite-assets-double-loading/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/miirinjej/dev/projects/vite-assets-double-loading',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/home/miirinjej/dev/projects/vite-assets-double-loading/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/home/miirinjej/dev/projects/vite-assets-double-loading/node_modules/.vite',
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +4ms

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Shinigami92]

In this issue #2672 I had a workaround with not using lazy components
Does this also apply to your issue?
Then I can add the label has workaround 🙂

[miirinjej]

In this issue #2672 I had a workaround with not using lazy components
Does this also apply to your issue?
Then I can add the label has workaround slightly_smiling_face

Lazy loading works, but the component is loaded twice. Maybe this is how it should be, I don't know. In development mode, the component is loaded once.
Yes, we don't need to use lazy loading as a workaround. Mark it, please.

[bluwy]

Can confirm this still happens in Vite 2.8.6, plugin-vue 2.2.4

[sapphi-red]

This only happens when splitVendorChunkPlugin is enabled (which is enabled default with Vite <2.9.0).
Also modulepreload polyfill should be used.

I think this part is affecting.

• With splitVendorChunkPlugin

  component: () => __vitePreload(() => import("./Projects.0d283181.js"), true ? ["assets/Projects.0d283181.js","assets/vendor.7ae37152.js"] : void 0)

• Without splitVendorChunkPlugin

  component: () => __vitePreload(() => import("./Projects.547ad753.js"), true ? [] : void 0)

I feel it is inconsistent not to have ["./Projects.547ad753.js"] in __vitePreload when it is without splitVendorChunkPlugin.
No it seems intended.

[sapphi-red]

So it is a duplicate of #5532.
Closing this one because #5532 has more information though this is created earlier.