Comments (5)
t
1: maybe a assetsInlineLimit
function config is enough
assetsInlineLimit: (id) => {
return id.includes('01')
}
2: not sure about this +_+
from vite.
There is a config about img convert assetsInlineLimit
https://vitejs.dev/config/build-options.html#build-assetsinlinelimit
from vite.
There is a config about img convert
assetsInlineLimit
https://vitejs.dev/config/build-options.html#build-assetsinlinelimit
Thanks @PengBoUESTC It is indeed related to this configuration, setting to 0 solves the problem.
But what puzzles me is that I found 3 parameters for importing files in client.d.ts
, and there is no description of the ?inline
parameter in the documentation, and using it has no effect.
For some files, I want to explicitly import them using inline or url, instead of automatically processing it by size.
The other side is that this behavior is not uniform in dev mode and prod mode, which can lead to issues that are difficult to troubleshoot in dev mode and are only discovered after going prod.
declare module '*?raw' {
const src: string
export default src
}
declare module '*?url' {
const src: string
export default src
}
declare module '*?inline' {
const src: string
export default src
}
from vite.
There is a config about img convert
assetsInlineLimit
https://vitejs.dev/config/build-options.html#build-assetsinlinelimitThanks @PengBoUESTC It is indeed related to this configuration, setting to 0 solves the problem.
But what puzzles me is that I found 3 parameters for importing files in
client.d.ts
, and there is no description of the?inline
parameter in the documentation, and using it has no effect.For some files, I want to explicitly import them using inline or url, instead of automatically processing it by size.
The other side is that this behavior is not uniform in dev mode and prod mode, which can lead to issues that are difficult to troubleshoot in dev mode and are only discovered after going prod.
declare module '*?raw' { const src: string export default src } declare module '*?url' { const src: string export default src } declare module '*?inline' { const src: string export default src }
first of all : there is a default assets file test about filetoURL
assetsInclude(file: string) {
return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file)
}
so that if u didn't use url
query, the svg
will be compiled by vite:asset
plugin too,
and then , I notice that vite
handle the file in different way
export async function fileToUrl(
id: string,
config: ResolvedConfig,
ctx: PluginContext,
): Promise<string> {
if (config.command === 'serve') {
return fileToDevUrl(id, config)
} else {
return fileToBuiltUrl(id, config, ctx)
}
}
last, I think that Base64
url is a kind of url, the difference is file compiled or not.
from vite.
@PengBoUESTC I totally agree with you that Data URLs are also a type of URLs. Now there are only two final questions:
- Is it possible to explicitly specify whether the type of import is a dataurl or a regular url? (there are always some people who have some strange needs).
- Is it possible to get consistent behavior in dev and prod modes?
So far assetsInlineLimit
solves my problem, and the above is what I think could be taken a step further.
from vite.
Related Issues (20)
- vs code debugging vite+vue3 project breakpoints cannot point to source code HOT 2
- Vite cli swallows thrown errors HOT 1
- Conditional exports can't be active when key is `browser` HOT 1
- vite.config.ts Can't import ESM if it's a .js file
- When the "node" condition path in exports is null vite build will wrongly throw a "No known conditions for" error HOT 1
- Dynamic import not working as expected with base public path option. HOT 5
- Qwik template doesn't build HOT 1
- In production build asset location is not getting resolve HOT 1
- vite can not get cookie from set-cookie HOT 3
- Allow plugins to hook into `preprocessCSS()` HOT 9
- The object is created with the old class name, but the instanceof check is performed with the renamed class name HOT 1
- Unable to exclude certain css `@import` statements from getting inlined HOT 3
- 5.4.3 production bug HOT 2
- Improper escaping of HTML attribute when `transformIndexHtml` is used HOT 1
- failed CSS preloads prevent loading dependencies HOT 1
- [vite:css] [postcss] ENOENT: no such file or directory
- Issues with dynamic import of static JS file HOT 2
- Modifications to the `server.proxy` in the plugin API `configureServer` did not take effect HOT 1
- Testing files are not excluded on prod build HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite.