Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize bundle for Object.keys(import.meta.glob()) and Object.values(import.meta.glob()) #18662

Open
4 tasks done
otomad opened this issue Nov 13, 2024 · 0 comments · May be fixed by #18666
Open
4 tasks done

Optimize bundle for Object.keys(import.meta.glob()) and Object.values(import.meta.glob()) #18662

otomad opened this issue Nov 13, 2024 · 0 comments · May be fixed by #18666

Comments

@otomad
Copy link
Contributor

otomad commented Nov 13, 2024

Description

If I only care about the file names of all the files in a folder in the source directory of the project, and I don't care about the contents of those files. I can use Object.keys(import.meta.glob()) to get it. However, this will also bundle the contents of these files, resulting in a larger distribution file size.

Or maybe I only care about the contents of all the files in a folder in the source directory of the project, and I don't care about the directories and file names of those files. I can use Object.values(import.meta.glob()) to get it. Although this file size is a bit less expensive than the former, it can also solve the problem together.

Suggested solution

If I declare this:

Object.keys(import.meta.glob("./path/to/my/stuff/**/*.png"))

It may get this result:

Object.keys({
    "./path/to/my/stuff/foo.png": () => import("./foo.png"),
    "./path/to/my/stuff/bar.png": () => import("./bar.png"),
    "./path/to/my/stuff/baz/qux.png": () => import("./qux.png"),
})

And also copy three unnecessary png files to the dist directory, which I don't really need them.
Those assets have been optimized and bundled by other vite plugins, so I don't need to copy them, I just need their file names.

It can be completely simplified to:

["./path/to/my/stuff/foo.png", "./path/to/my/stuff/bar.png", "./path/to/my/stuff/baz/qux.png"]

In the same way, if I only need their file contents:

Object.values(import.meta.glob("./path/to/my/stuff/**/*.png"))

It can also be compile to:

[() => import("./foo.png"), () => import("./bar.png"), () => import("./qux.png")]

Alternative

If just for the former, I can also use a special query, like "?nothing". Make it become:

Object.keys(import.meta.glob("./path/to/my/stuff/**/*.png"), { eager: true, query: "?nothing" })

Which compile to:

Object.keys({
    "./path/to/my/stuff/foo.png": "",
    "./path/to/my/stuff/bar.png": "",
    "./path/to/my/stuff/baz/qux.png": "",
})

This temporarily alleviates the problem of distribution file size. Although this is not the optimal solution.

Additional context

By searching for Object.keys(import.meta.glob and Object.values(import.meta.glob on GitHub, you can see that there is already a lot of code that uses them. So if optimize this macro, it can make quite a few distribution files smaller.

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant