new URL ,The packing volume increases 打包体积增大

[a982246809]

Describe the bug

function getImageUrl(name) {
  return new URL(`./assets/imgs/${name}`, import.meta.url).href;
}
getImageUrl('home/aaa.jpg');

It seems to pack all the image addresses under imgs.
似乎会把imgs下的所有图片地址都打包

Reproduction

https://stackblitz.com/edit/vitejs-vite-irxn4k?file=main.js,package.json&terminal=dev

Steps to reproduce

npm run build

System Info

https://stackblitz.com/edit/vitejs-vite-irxn4k?file=main.js,package.json&terminal=dev

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• 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.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-irxn4k (Open reproduction)

[sapphi-red]

This is expected. Vite cannot analyze that name can only be home/aaa.jpg and thus it bundles all files in the imgs directory.

[a982246809]

@sapphi-red
Is there any way to solve it? I have used the getImageUrl method extensively in the project.
有什么可以办法可以解决吗 , 我已经在项目中大面积使用 getImageUrl 方法了

[sapphi-red]

I guess using import.meta.glob would work. With the following code, Vite will only bundle a.jpg and b.jpg and c.jpg.

const modules = import.meta.glob('./assets/img/{a,b,c}.jpg', { eager: true })
function getImageUrl(name) {
  return modules[`./assets/imgs/${name}`]
}