Replies: 25 comments 12 replies
|
When I only change renderBuildUrl function, the chunk hash will not change. |
|
Good point, this may prevent us from stabilizing the feature. Would you create an issue with this reproduction so we can properly track it? Bringing a comment I did at #13973 (comment): The way we handle preloads may also get in the way to stabilize renderBuiltUrl. I don't know how to properly fix that one though if we need to wait until generateBundle. We could try to add something to augmentChunkHash, using |
|
Ok. |
|
Thoughts on the fix I've proposed in #21433? |
|
I'm not sure should I write here of I missed something... In my specific case hashing bundle files is not enough to eliminate caching issues. I wanted to add extra query parameter for each I tried this: experimental: {
renderBuiltUrl(filename: string, { type }: { type: 'public' | 'asset' }) {
if (type === 'asset' && extname(filename) === '.js') {
return '/' + filename + '?TEST'
}
},
},But this doesn't seem to work for dynamic imports at all, here is part of my application router: Query parameter is added for preload though, so if I enable preload, same files loaded twice, with (preload) and without (dynamic import) query parameter... |
|
You can see same behaviour by the link in the comment above: It changes preload paths, but not the actual import path. |
|
Regular imports are not affected as well... Maybe I am using wrong API for my task 🤔 |
|
I've wrote this plugin: {
name: 'add-query-parameter-plugin',
generateBundle(_options, bundle) {
for (const [filename, chunk] of Object.entries(bundle)) {
if (extname(filename) === '.js' && 'code' in chunk && chunk.code) {
// replace regular imports
chunk.code = chunk.code.replace(
/(from\s*['"][^"')]+\.js)(['"])/g,
(_, $1, $2) => `${$1}?HELL${$2}`
)
// replace dynamic imports and regular imports without 'from'
chunk.code = chunk.code.replace(
/(import\(?['"][^"')]+\.js)(['"]\)?)/g,
(_, $1, $2) => `${$1}?YEAH${$2}`
)
}
}
},
},But I don't like it, I really hate to mangle with source code using regular expressions ._. I am afraid this could shoot me in the foot. |
|
Not sure if this belongs here as it's related more to But I had this idea the other day about whether it would be possible to use import assertions to specify if an import should be preloaded. For example: const data = await import("./foo", { with: { preload: true } });A limitation would be that the import options would have to be statically defined so that the code can be statically analyzed at compile time. |
|
I have the same issue as victordidenko. Here is the basic setup I've put in place: base: "client/dist/platform"
experimental: {
renderBuiltUrl(filename: string, { hostType }: { hostType: "js" | "css" | "html" }) {
if (hostType === "js") {
return { runtime: `window.buildUrl(${JSON.stringify(filename)})` };
} else {
return { relative: true };
}
}
}And in my index.html I have (for my test): ...
<script>
window.buildUrl = (filename) => {
return `https://myCdnUrl/client/dist/platform/${filename}`
}
</script>
....When I'm navigating into my app on I pushed a bit further in my testing, putting the same string in my buildUrl function i.e.: In this case I don't see double loading of js assets and assets are all (or almost all) imported using the preload imports. Do you have any idea of what can cause this duplication in js assets import. |
|
@GMillerand did you get a solution to this duplication? |
|
I want to give feedback that this feature is excellent for fixing asset paths when developing browser extensions. More context in crxjs/chrome-extension-tools#842 (comment). |
|
I have a mutiple entry app， and i want build app only once，but i cant get the assets's entry in this config😭 |
|
Just tried this. Works really well to enable runtime injection of assets path – we use it to build feature preview support where assets might be stored in a different bucket. |
|
Just what I needed, in our case we use a base url pointing to our CDN, so doing |
|
I have a react web app with vite as bundling tool when i build my react web app using vite all the assets will be bundled in a build/ folder in vite config i have specified base: https://x.y.com so in my production all the assets ( js, css, svg, png, jpg .. . . ) will be downloaded with path this is working totaly fine but now my assets are deployed on 2 different cdn urls so I have to config vite such that all js files should have base url as https://x.y.cpm/index.dfgwer.js how can i do this ? |
|
You just need to attach two URL variables to the window object. |
|
Really neat feature, currently doing a microfrontend, where we move the files to a specific location. This helps us point at the location its residing and saves us some work interpreting build files and generating our own html file. |
|
Does it only take effect in build? Can it take effect during the development phase, because it will be nested under the micro-application |
|
Hello, we tested this on a website using php for generating document and a CDN (cdn.x.com) that just sits in front of the app domain (y.com). The vite config is and in our main document we had to expose the various assets (css,js,fonts) using the cdn domain and also define the js function for runtime |
|
Do not support lib mode？ |
|
Hi there, my use case: we have our app build which should be installed on different paths of the same host: example.com/instance1/app, example.com/instance2/app I tried this function as window.__toAppUrl = (filename) => {
const location = window.location
let appPath = location.pathname
const endpointIndex = location.pathname.indexOf('/app')
if (endpointIndex !== -1)
appPath = location.pathname.substring(0, endpointIndex)
const newUrl = new URL(location)
newUrl.pathname = `${appPath}/${filename}`
return newUrl.toString()in the vite.config I have this: experimental: {
renderBuiltUrl(filename, opts) {
return {
runtime: `window.__toAppUrl(${JSON.stringify(filename)})`,
}
},
},Sadly the build fails with this error: Any ideas on how can it be used in the use case? |
|
Same. ERROR error during build:
[vite:build-html] { runtime: "window.__toCdnUrl("assets/index-legacy-DuCXn726.js")" } is not supported for assets in html files: assets/index-legacy-DuCXn726.js
at toOutputFilePathWithoutRuntime (file:///D:/Projects/Web_Projects/wms_web/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:51861:15) |
|
fund reason: export function toOutputFilePathWithoutRuntime(
filename: string,
type: 'asset' | 'public',
hostId: string,
hostType: 'js' | 'css' | 'html',
config: ResolvedConfig,
toRelative: (filename: string, hostId: string) => string,
): string {
const { renderBuiltUrl } = config.experimental
let relative = config.base === '' || config.base === './'
if (renderBuiltUrl) {
const result = renderBuiltUrl(filename, {
hostId,
hostType,
type,
ssr: !!config.build.ssr,
})
if (typeof result === 'object') {
if (result.runtime) {
throw new Error(
`{ runtime: "${result.runtime}" } is not supported for assets in ${hostType} files: ${filename}`,
)
}
if (typeof result.relative === 'boolean') {
relative = result.relative
}
} else if (result) {
return result
}
}
if (relative && !config.build.ssr) {
return toRelative(filename, hostId)
} else {
return joinUrlSegments(config.decodedBase, filename)
}
}
export const toOutputFilePathInCss = toOutputFilePathWithoutRuntime
export const toOutputFilePathInHtml = toOutputFilePathWithoutRuntimeIt just not workes in css & html. Sad. : (. |
|
i use like it with my own replacement service, for ex.:{wcm_staticURL} will replace to a http addr after build ,i got %7Bwcm_staticURL%7D in some files ,i expect vite don't change "{" and "}" by the way: vite 4.5.1 is still ok Can you tell me how to use "{" and "}" variable in vite 5.4.8? |
|
when i open this with multiple entry pages, vue template's scoped css missed |
|
I am using this option for a really annoying deployment target that creates URLs like the following:
This works fantastic for the two scenarios mentioned above, but I am now trying to collect all of the final transformed URLs after this step has been called. Is there a build hook that I can call to do so? I'm trying to search through the final assets to grab URLs for a webmanifest. |
|
Is it steel experimental? |
|
This is exactly what I need, since the application’s base path is only known at runtime. After the build, I have a single package that can be deployed across multiple applications, each with its own URL or base path. This option allows me to dynamically configure the URLs or base paths at runtime, without needing a separate build for each application. It’s pretty clear that a feature like this should be promoted and definitely move out of the “experimental” scope. |
|
Hey, great feature! I use this to separate webserver-served public files from CDN-served assets. First question - __assetsPathIn the https://vite.dev/guide/build#advanced-base-options example, there's a example for handling Second question (minor nit) - templated import of the (static url-d) production assetsThe way I use renderBuiltUrl is, in production mode I return the filename prefixed by the absolute cdn scheme+host+path, so the result is a full url. I have some assets that are constructed dynamically using the In the output code, vite resolves these, but still accesses with the URL + import.meta.url mechanism. But since these are full urls, sounds like the import.meta.url is in vain. Is there an alternate mechanism that generates direct static urls for these dynamic imports? |
|
This I'd love to see this rolled into the next major version without the |
|
I trued to use the example which included this: } else if (path.extname (hostId) === '.js') {
return {
runtime: `window.__assetsPath(${JSON.stringify(filename)})`
}
}But I get an error that I'm not also not sure what this clause is in the example. Shouldn't it be sufficient to treat |
|
Experimental feature runs in prod. Dont remove it plz. |
|
I fail to see how a 3yr old feature is not stabilized yet. |
|
nobody replied even 🥲 |
|
Hi! This feature saved my bacon today. My app is deployed to various servers, each of which has its own CDN configuration which can change dynamically. We instrument the generated HTML to prepend the CDN on the module preloads, but I found that Vite's loader was going back to the main server, and it was reloading modules that had already been loaded from the CDN. The solution ended up being something like this: renderBuiltUrl(filename, info) {
if (info.ssr || info.hostType === 'html') return undefined
return {
runtime: `window.__CDN_BASE + ${JSON.stringify(filename)}`,
}
}where This is working perfectly so far. Thank you! |
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
renderBuiltUrlOpen question: Should we move it from experimental to a vite-specific hook or to a config option in
build.We're looking to stabilize this feature in Vite 5. If you have feedback about it, let's use this discussion to gather it.
All reactions