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

assetsInlineLimit资源会重复内嵌 #12457

Open
7 tasks done
juntaosun opened this issue Mar 17, 2023 · 0 comments · May be fixed by #12517
Open
7 tasks done

assetsInlineLimit资源会重复内嵌 #12457

juntaosun opened this issue Mar 17, 2023 · 0 comments · May be fixed by #12517
Labels
enhancement New feature or request feat: css

Comments

@juntaosun
Copy link

Describe the bug

assetsInlineLimit Embedded resource problem:
默认情况下,assetsInlineLimit = 4096 。Default limit is 4096 (4kb)
经过实际测试,如果代码内有多处使用相同的图片资源:@/renderer/assets/icon/zh.png
After actual testing, if there are multiple places in the code that use the same image resource

example:

`.test1 {
background-image: url('@/renderer/assets/icon/zh.png');
}

.test2 {
background-image: url('@/renderer/assets/icon/zh.png');
}

.test3 {
background-image: url('@/renderer/assets/icon/zh.png');
}`

打包生成的代码中,会多次被嵌入成Base64。
The code generated by the package will be embedded into Base64 many times.

`.test1[data-v-8c0be6fb] {
background-image: url(data:image/png;base64,........) //zh.png
}

.test2[data-v-8c0be6fb] {
background-image: url(data:image/png;base64,........) //zh.png
}

.test3[data-v-8c0be6fb] {
background-image: url(data:image/png;base64,........) //zh.png
}

more...
`
包含的体积:size = zh.png * N

这只是在CSS中引用的情况,在js或ts中也是同样如此,同样一个URL图片资源在打包成base64后,
在代码中重复引用URL,会在多处转换成base64反复内嵌。
带来的问题,可能是代码文件体积的增加。

This is only the case of referencing in CSS, and the same is true in js or ts. After the same URL image resource is packaged into base64,
Repeatedly referencing the URL in the code will convert to base64 repeatedly inline in many places.
The problem may be the increase in the size of the code file.

另外,在编写vite插件时,无法获得源URL和转换后的base64对应的关系。
希望能为插件提供这样的能力。

plugins: file sourceURL ==> base64URL

Also, when writing the vite plugin, the relationship between the source URL and the converted base64 is not available.
Hope to provide such a capability for plugins.

谢谢,Thank you.

Reproduction

npm create vite@latest

Steps to reproduce

vite build

System Info

vite build

Used Package Manager

npm

Logs

vite build

Validations

@fi3ework fi3ework added enhancement New feature or request and removed pending triage labels Mar 18, 2023
@sun0day sun0day linked a pull request Mar 21, 2023 that will close this issue
9 tasks
@bluwy bluwy added the feat: css label Nov 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feat: css
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants