when i build the vue3 project, i got a output file name like [component].vue_vue_type_script_setup_true_lang.[hash].js

[JiatLn]

Describe the bug

when i npm run build, i got a output file name like [component].vue_vue_type_script_setup_true_lang.[hash].js

Reproduction

https://github.com/JiatLn/vite-build-demo.git

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
    Memory: 1.36 GB / 7.88 GB
  Binaries:
    Node: 14.19.0 - E:\software\nodejs\node.EXE
    Yarn: 1.22.18 - E:\software\nodejs\yarn.CMD
    npm: 6.14.16 - E:\software\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

yarn

Logs

No response

Validations

• [x] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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 vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

What is the problem here?

[ydcjeff]

I think the problem is the weird output (comp.vue_vue_type_script_setup_true_lang.[hash].js) instead of [name].[hash].js.

[sapphi-red]

The name is generated by rollup from id(comp.vue?vue&type=script&setup=true&lang.js). We could treat vue files specially and replace the filename in generateBundle hook. But I don't think this causes any problem.

[hrishikesh-k]

It's probably not a problem, except the cause is unknown. I did not have a problem in any of my other Vite 3 + Vue 3 projects. I haven't made many, but not sure what's happening here. Here's how my chunks folder looks:

My Vite config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]',
        chunkFileNames: 'chunks/[name].js',
        entryFileNames: 'entries/[name].js'
      }
    },
    sourcemap: true,
    target: 'esnext'
  }
})

Note that, badge is the only file from my components folder that's ending up like that:

while all the other chunks are from my pages directory:

I know this is not really useful without me actually providing a reproduction (as I've said, this doesn't always happen), but providing a reproduction is most likely going to be tough. If someone has some pointers on what to check (try to add/edit) to avoid this, that would be great!

Note that, the badge component is nothing fancy. It's a super simple component which is using defineProps, computed and is one of my smallest components. button for example is a bit complex than that - with various states and props, it goes about 200 lines. So, I don't think "complexity" of the component is an issue (not sure if it ever was), but that's my only guess.

[JiatLn]

It's probably not a problem, except the cause is unknown. I did not have a problem in any of my other Vite 3 + Vue 3 projects. I haven't made many, but not sure what's happening here. Here's how my chunks folder looks:

My Vite config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]',
        chunkFileNames: 'chunks/[name].js',
        entryFileNames: 'entries/[name].js'
      }
    },
    sourcemap: true,
    target: 'esnext'
  }
})

Note that, badge is the only file from my components folder that's ending up like that:

while all the other chunks are from my pages directory:

I know this is not really useful without me actually providing a reproduction (as I've said, this doesn't always happen), but providing a reproduction is most likely going to be tough. If someone has some pointers on what to check (try to add/edit) to avoid this, that would be great!

Note that, the badge component is nothing fancy. It's a super simple component which is using defineProps, computed and is one of my smallest components. button for example is a bit complex than that - with various states and props, it goes about 200 lines. So, I don't think "complexity" of the component is an issue (not sure if it ever was), but that's my only guess.

I have a guess that it will happen when the component had use to many times.

[hrishikesh-k]

Thank you for your message!

I have a guess that it will happen when the component had use to many times.

I don't think it's being used too many times, but even if that's the case, it still doesn't explain the weird name that component is getting while others are working as expected.

[BigFrontEnd-China]

I have the same problem！

// package.json
{
  "name": "demo-components",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: "./src/components/index.ts",
      formats: ["cjs"],
      name: "components",
    },
    rollupOptions: {
      external: ["vue"],
      output: [
        {
          dir: "dist/components",
          format: "cjs",
          entryFileNames: "[name].js",
          preserveModules: true,
          preserveModulesRoot: "components",
        },
      ],
    },
  },
  plugins: [vue()],
});

[robokozo]

I'm also seeing the same thing:

...
dist/assets/dates.32565151.js  
dist/assets/ConfirmationButton.vue_vue_type_script_setup_true_lang.db3c1ab5.js
dist/assets/SubtleSortToggleButton.vue_vue_type_script_setup_true_lang.d7615288.js
dist/assets/index.350ee0b4.css
...

Also FWIW.. those components also seem to be MASSIVE compared to what they actually are. That SubtleSortToggleButton is 146.95 KiB. It's a <button> with some css toggling

When I inspect the minified js it also seems to include a lot of stuff that I wasn't expecting.

@JiatLn 's affected FillBlankTextarea is also significantly larger than the others

[jonaskuske]

@robokozo are you using any images, fonts, other kinds of assets? All assets are inlined into the JS/CSS files if you build in lib mode, so the generated JS/CSS files can get huge.

[robokozo]

@jonaskuske its a normal vue app. I can show the details tomorrow but the file is a relatively simple. It's a button that uses different classes based on a Boolean. I believe it only has 1 dependency on a file with interface definitions.

[lingdu1234]

i have the same problem ,not all the file,and not found any reason