Skip to content

Commit e223f84

Browse files
patak-devpatak-dev
authoredSep 24, 2022
feat: build.modulePreload options (#9938)
·
v6.3.0-beta.1create-vite@3.2.0
1 parent 66c9058 commit e223f84

16 files changed

+411
-69
lines changed
 

‎docs/config/build-options.md

+39-5
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,55 @@ The transform is performed with esbuild and the value should be a valid [esbuild
1717

1818
Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See [esbuild docs](https://esbuild.github.io/content-types/#javascript) for more details.
1919

20-
## build.polyfillModulePreload
20+
## build.modulePreload
2121

22-
- **Type:** `boolean`
22+
- **Type:** `boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }`
2323
- **Default:** `true`
2424

25-
Whether to automatically inject [module preload polyfill](https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill).
26-
27-
If set to `true`, the polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-html custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry:
25+
By default, a [module preload polyfill](https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill) is automatically injected. The polyfill is auto injected into the proxy module of each `index.html` entry. If the build is configured to use a non-HTML custom entry via `build.rollupOptions.input`, then it is necessary to manually import the polyfill in your custom entry:
2826

2927
```js
3028
import 'vite/modulepreload-polyfill'
3129
```
3230

3331
Note: the polyfill does **not** apply to [Library Mode](/guide/build#library-mode). If you need to support browsers without native dynamic import, you should probably avoid using it in your library.
3432

33+
The polyfill can be disabled using `{ polyfill: false }`.
34+
35+
The list of chunks to preload for each dynamic import is computed by Vite. By default, an absolute path including the `base` will be used when loading these dependencies. If the `base` is relative (`''` or `'./'`), `import.meta.url` is used at runtime to avoid absolute paths that depend on the final deployed base.
36+
37+
There is experimental support for fine grained control over the dependencies list and their paths using the `resolveDependencies` function. It expects a function of type `ResolveModulePreloadDependenciesFn`:
38+
39+
```ts
40+
type ResolveModulePreloadDependenciesFn = (
41+
url: string,
42+
deps: string[],
43+
context: {
44+
importer: string
45+
}
46+
) => (string | { runtime?: string })[]
47+
```
48+
49+
The `resolveDependencies` function will be called for each dynamic import with a list of the chunks it depends on, and it will also be called for each chunk imported in entry HTML files. A new dependencies array can be returned with these filtered or more dependencies injected, and their paths modified. The `deps` paths are relative to the `build.outDir`. Returning a relative path to the `hostId` for `hostType === 'js'` is allowed, in which case `new URL(dep, import.meta.url)` is used to get an absolute path when injecting this module preload in the HTML head.
50+
51+
```js
52+
modulePreload: {
53+
resolveDependencies: (filename, deps, { hostId, hostType }) => {
54+
return deps.filter(condition)
55+
}
56+
}
57+
```
58+
59+
The resolved dependency paths can be further modified using [`experimental.renderBuiltUrl`](../guide/build.md#advanced-base-options).
60+
61+
## build.polyfillModulePreload
62+
63+
- **Type:** `boolean`
64+
- **Default:** `true`
65+
- **Deprecated** use `build.modulePreload.polyfill` instead
66+
67+
Whether to automatically inject a [module preload polyfill](https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill).
68+
3569
## build.outDir
3670
3771
- **Type:** `string`

‎packages/vite/src/node/build.ts

+74-9
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,15 @@ export interface BuildOptions {
7272
* whether to inject module preload polyfill.
7373
* Note: does not apply to library mode.
7474
* @default true
75+
* @deprecated use `modulePreload.polyfill` instead
7576
*/
7677
polyfillModulePreload?: boolean
78+
/**
79+
* Configure module preload
80+
* Note: does not apply to library mode.
81+
* @default true
82+
*/
83+
modulePreload?: boolean | ModulePreloadOptions
7784
/**
7885
* Directory relative from `root` where build output will be placed. If the
7986
* directory exists, it will be removed before the build.
@@ -228,16 +235,67 @@ export interface LibraryOptions {
228235

229236
export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'
230237

231-
export type ResolvedBuildOptions = Required<BuildOptions>
238+
export interface ModulePreloadOptions {
239+
/**
240+
* Whether to inject a module preload polyfill.
241+
* Note: does not apply to library mode.
242+
* @default true
243+
*/
244+
polyfill?: boolean
245+
/**
246+
* Resolve the list of dependencies to preload for a given dynamic import
247+
* @experimental
248+
*/
249+
resolveDependencies?: ResolveModulePreloadDependenciesFn
250+
}
251+
export interface ResolvedModulePreloadOptions {
252+
polyfill: boolean
253+
resolveDependencies?: ResolveModulePreloadDependenciesFn
254+
}
255+
256+
export type ResolveModulePreloadDependenciesFn = (
257+
filename: string,
258+
deps: string[],
259+
context: {
260+
hostId: string
261+
hostType: 'html' | 'js'
262+
}
263+
) => string[]
264+
265+
export interface ResolvedBuildOptions
266+
extends Required<Omit<BuildOptions, 'polyfillModulePreload'>> {
267+
modulePreload: false | ResolvedModulePreloadOptions
268+
}
232269

233270
export function resolveBuildOptions(
234271
raw: BuildOptions | undefined,
235272
isBuild: boolean,
236273
logger: Logger
237274
): ResolvedBuildOptions {
275+
const deprecatedPolyfillModulePreload = raw?.polyfillModulePreload
276+
if (raw) {
277+
const { polyfillModulePreload, ...rest } = raw
278+
raw = rest
279+
if (deprecatedPolyfillModulePreload !== undefined) {
280+
logger.warn(
281+
'polyfillModulePreload is deprecated. Use modulePreload.polyfill instead.'
282+
)
283+
}
284+
if (
285+
deprecatedPolyfillModulePreload === false &&
286+
raw.modulePreload === undefined
287+
) {
288+
raw.modulePreload = { polyfill: false }
289+
}
290+
}
291+
292+
const modulePreload = raw?.modulePreload
293+
const defaultModulePreload = {
294+
polyfill: true
295+
}
296+
238297
const resolved: ResolvedBuildOptions = {
239298
target: 'modules',
240-
polyfillModulePreload: true,
241299
outDir: 'dist',
242300
assetsDir: 'assets',
243301
assetsInlineLimit: 4096,
@@ -266,7 +324,17 @@ export function resolveBuildOptions(
266324
warnOnError: true,
267325
exclude: [/node_modules/],
268326
...raw?.dynamicImportVarsOptions
269-
}
327+
},
328+
// Resolve to false | object
329+
modulePreload:
330+
modulePreload === false
331+
? false
332+
: typeof modulePreload === 'object'
333+
? {
334+
...defaultModulePreload,
335+
...modulePreload
336+
}
337+
: defaultModulePreload
270338
}
271339

272340
// handle special build targets
@@ -903,19 +971,16 @@ export type RenderBuiltAssetUrl = (
903971
}
904972
) => string | { relative?: boolean; runtime?: string } | undefined
905973

906-
export function toOutputFilePathInString(
974+
export function toOutputFilePathInJS(
907975
filename: string,
908976
type: 'asset' | 'public',
909977
hostId: string,
910978
hostType: 'js' | 'css' | 'html',
911979
config: ResolvedConfig,
912-
format: InternalModuleFormat,
913980
toRelative: (
914981
filename: string,
915982
hostType: string
916-
) => string | { runtime: string } = getToImportMetaURLBasedRelativePath(
917-
format
918-
)
983+
) => string | { runtime: string }
919984
): string | { runtime: string } {
920985
const { renderBuiltUrl } = config.experimental
921986
let relative = config.base === '' || config.base === './'
@@ -943,7 +1008,7 @@ export function toOutputFilePathInString(
9431008
return config.base + filename
9441009
}
9451010

946-
function getToImportMetaURLBasedRelativePath(
1011+
export function createToImportMetaURLBasedRelativeRuntime(
9471012
format: InternalModuleFormat
9481013
): (filename: string, importer: string) => { runtime: string } {
9491014
const toRelativePath = relativeUrlMechanisms[format]

‎packages/vite/src/node/config.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,12 @@ import { resolveSSROptions } from './ssr'
6262

6363
const debug = createDebugger('vite:config')
6464

65-
export type { RenderBuiltAssetUrl } from './build'
65+
export type {
66+
RenderBuiltAssetUrl,
67+
ModulePreloadOptions,
68+
ResolvedModulePreloadOptions,
69+
ResolveModulePreloadDependenciesFn
70+
} from './build'
6671

6772
// NOTE: every export in this file is re-exported from ./index.ts so it will
6873
// be part of the public API.

‎packages/vite/src/node/plugins/asset.ts

+12-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ import type {
1313
} from 'rollup'
1414
import MagicString from 'magic-string'
1515
import colors from 'picocolors'
16-
import { toOutputFilePathInString } from '../build'
16+
import {
17+
createToImportMetaURLBasedRelativeRuntime,
18+
toOutputFilePathInJS
19+
} from '../build'
1720
import type { Plugin } from '../plugin'
1821
import type { ResolvedConfig } from '../config'
1922
import { cleanUrl, getHash, normalizePath } from '../utils'
@@ -57,6 +60,10 @@ export function renderAssetUrlInJS(
5760
opts: NormalizedOutputOptions,
5861
code: string
5962
): MagicString | undefined {
63+
const toRelativeRuntime = createToImportMetaURLBasedRelativeRuntime(
64+
opts.format
65+
)
66+
6067
let match: RegExpExecArray | null
6168
let s: MagicString | undefined
6269

@@ -76,13 +83,13 @@ export function renderAssetUrlInJS(
7683
const file = getAssetFilename(hash, config) || ctx.getFileName(hash)
7784
chunk.viteMetadata.importedAssets.add(cleanUrl(file))
7885
const filename = file + postfix
79-
const replacement = toOutputFilePathInString(
86+
const replacement = toOutputFilePathInJS(
8087
filename,
8188
'asset',
8289
chunk.fileName,
8390
'js',
8491
config,
85-
opts.format
92+
toRelativeRuntime
8693
)
8794
const replacementString =
8895
typeof replacement === 'string'
@@ -100,13 +107,13 @@ export function renderAssetUrlInJS(
100107
s ||= new MagicString(code)
101108
const [full, hash] = match
102109
const publicUrl = publicAssetUrlMap.get(hash)!.slice(1)
103-
const replacement = toOutputFilePathInString(
110+
const replacement = toOutputFilePathInJS(
104111
publicUrl,
105112
'public',
106113
chunk.fileName,
107114
'js',
108115
config,
109-
opts.format
116+
toRelativeRuntime
110117
)
111118
const replacementString =
112119
typeof replacement === 'string'

‎packages/vite/src/node/plugins/html.ts

+27-12
Original file line numberDiff line numberDiff line change
@@ -581,8 +581,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
581581
processedHtml.set(id, s.toString())
582582

583583
// inject module preload polyfill only when configured and needed
584+
const { modulePreload } = config.build
584585
if (
585-
config.build.polyfillModulePreload &&
586+
(modulePreload === true ||
587+
(typeof modulePreload === 'object' && modulePreload.polyfill)) &&
586588
(someScriptsAreAsync || someScriptsAreDefer)
587589
) {
588590
js = `import "${modulePreloadPolyfillId}";\n${js}`
@@ -627,14 +629,14 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
627629
})
628630

629631
const toPreloadTag = (
630-
chunk: OutputChunk,
632+
filename: string,
631633
toOutputPath: (filename: string) => string
632634
): HtmlTagDescriptor => ({
633635
tag: 'link',
634636
attrs: {
635637
rel: 'modulepreload',
636638
crossorigin: true,
637-
href: toOutputPath(chunk.fileName)
639+
href: toOutputPath(filename)
638640
}
639641
})
640642

@@ -726,15 +728,28 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
726728
// when not inlined, inject <script> for entry and modulepreload its dependencies
727729
// when inlined, discard entry chunk and inject <script> for everything in post-order
728730
const imports = getImportedChunks(chunk)
729-
const assetTags = canInlineEntry
730-
? imports.map((chunk) =>
731-
toScriptTag(chunk, toOutputAssetFilePath, isAsync)
732-
)
733-
: [
734-
toScriptTag(chunk, toOutputAssetFilePath, isAsync),
735-
...imports.map((i) => toPreloadTag(i, toOutputAssetFilePath))
736-
]
737-
731+
let assetTags: HtmlTagDescriptor[]
732+
if (canInlineEntry) {
733+
assetTags = imports.map((chunk) =>
734+
toScriptTag(chunk, toOutputAssetFilePath, isAsync)
735+
)
736+
} else {
737+
const { modulePreload } = config.build
738+
const resolveDependencies =
739+
typeof modulePreload === 'object' &&
740+
modulePreload.resolveDependencies
741+
const importsFileNames = imports.map((chunk) => chunk.fileName)
742+
const resolvedDeps = resolveDependencies
743+
? resolveDependencies(chunk.fileName, importsFileNames, {
744+
hostId: relativeUrlPath,
745+
hostType: 'html'
746+
})
747+
: importsFileNames
748+
assetTags = [
749+
toScriptTag(chunk, toOutputAssetFilePath, isAsync),
750+
...resolvedDeps.map((i) => toPreloadTag(i, toOutputAssetFilePath))
751+
]
752+
}
738753
assetTags.push(...getCssTagsForChunk(chunk, toOutputAssetFilePath))
739754

740755
result = injectToHead(result, assetTags)

‎packages/vite/src/node/plugins/importAnalysisBuild.ts

+127-32
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import type { Plugin } from '../plugin'
1717
import { getDepOptimizationConfig } from '../config'
1818
import type { ResolvedConfig } from '../config'
19+
import { toOutputFilePathInJS } from '../build'
1920
import { genSourceMapUrl } from '../server/sourcemap'
2021
import { getDepsOptimizer, optimizedDepNeedsInterop } from '../optimizer'
2122
import { isCSSRequest, removedPureCssFilesCache } from './css'
@@ -40,6 +41,11 @@ const dynamicImportPrefixRE = /import\s*\(/
4041
const optimizedDepChunkRE = /\/chunk-[A-Z0-9]{8}\.js/
4142
const optimizedDepDynamicRE = /-[A-Z0-9]{8}\.js/
4243

44+
function toRelativePath(filename: string, importer: string) {
45+
const relPath = path.relative(path.dirname(importer), filename)
46+
return relPath.startsWith('.') ? relPath : `./${relPath}`
47+
}
48+
4349
/**
4450
* Helper for preloading CSS and direct imports of async chunks in parallel to
4551
* the async chunk itself.
@@ -124,16 +130,49 @@ function preload(
124130
export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
125131
const ssr = !!config.build.ssr
126132
const isWorker = config.isWorker
127-
const insertPreload = !(ssr || !!config.build.lib || isWorker)
128-
129-
const relativePreloadUrls = config.base === './' || config.base === ''
130-
131-
const scriptRel = config.build.polyfillModulePreload
132-
? `'modulepreload'`
133-
: `(${detectScriptRel.toString()})()`
134-
const assetsURL = relativePreloadUrls
135-
? `function(dep,importerUrl) { return new URL(dep, importerUrl).href }`
136-
: `function(dep) { return ${JSON.stringify(config.base)}+dep }`
133+
const insertPreload = !(
134+
ssr ||
135+
!!config.build.lib ||
136+
isWorker ||
137+
config.build.modulePreload === false
138+
)
139+
140+
const resolveModulePreloadDependencies =
141+
config.build.modulePreload && config.build.modulePreload.resolveDependencies
142+
const renderBuiltUrl = config.experimental.renderBuiltUrl
143+
const customModulePreloadPaths = !!(
144+
resolveModulePreloadDependencies || renderBuiltUrl
145+
)
146+
const isRelativeBase = config.base === './' || config.base === ''
147+
const optimizeModulePreloadRelativePaths =
148+
isRelativeBase && !customModulePreloadPaths
149+
150+
const { modulePreload } = config.build
151+
const scriptRel =
152+
modulePreload && modulePreload.polyfill
153+
? `'modulepreload'`
154+
: `(${detectScriptRel.toString()})()`
155+
156+
// There are three different cases for the preload list format in __vitePreload
157+
//
158+
// __vitePreload(() => import(asyncChunk), [ ...deps... ])
159+
//
160+
// This is maintained to keep backwards compatibility as some users developed plugins
161+
// using regex over this list to workaround the fact that module preload wasn't
162+
// configurable.
163+
const assetsURL = customModulePreloadPaths
164+
? // If `experimental.renderBuiltUrl` or `build.modulePreload.resolveDependencies` are used
165+
// the dependencies are already resolved. To avoid the need for `new URL(dep, import.meta.url)`
166+
// a helper `__vitePreloadRelativeDep` is used to resolve from relative paths which can be minimized.
167+
`function(dep, importerUrl) { return dep.startsWith('.') ? new URL(dep, importerUrl).href : dep }`
168+
: optimizeModulePreloadRelativePaths
169+
? // If there isn't custom resolvers affecting the deps list, deps in the list are relative
170+
// to the current chunk and are resolved to absolute URL by the __vitePreload helper itself.
171+
// The importerUrl is passed as third parameter to __vitePreload in this case
172+
`function(dep, importerUrl) { return new URL(dep, importerUrl).href }`
173+
: // If the base isn't relative, then the deps are relative to the projects `outDir` and the base
174+
// is appendended inside __vitePreload too.
175+
`function(dep) { return ${JSON.stringify(config.base)}+dep }`
137176
const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
138177

139178
return {
@@ -258,7 +297,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
258297
str().appendRight(
259298
expEnd,
260299
`,${isModernFlag}?"${preloadMarker}":void 0${
261-
relativePreloadUrls ? ',import.meta.url' : ''
300+
optimizeModulePreloadRelativePaths || customModulePreloadPaths
301+
? ',import.meta.url'
302+
: ''
262303
})`
263304
)
264305
}
@@ -383,7 +424,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
383424
},
384425

385426
generateBundle({ format }, bundle) {
386-
if (format !== 'es' || ssr || isWorker) {
427+
if (
428+
format !== 'es' ||
429+
ssr ||
430+
isWorker ||
431+
config.build.modulePreload === false
432+
) {
387433
return
388434
}
389435

@@ -423,7 +469,14 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
423469
const deps: Set<string> = new Set()
424470
let hasRemovedPureCssChunk = false
425471

472+
let normalizedFile: string | undefined = undefined
473+
426474
if (url) {
475+
normalizedFile = path.posix.join(
476+
path.posix.dirname(chunk.fileName),
477+
url
478+
)
479+
427480
const ownerFilename = chunk.fileName
428481
// literal import - trace direct imports and add to deps
429482
const analyzed: Set<string> = new Set<string>()
@@ -458,10 +511,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
458511
}
459512
}
460513
}
461-
const normalizedFile = path.posix.join(
462-
path.posix.dirname(chunk.fileName),
463-
url
464-
)
465514
addDeps(normalizedFile)
466515
}
467516

@@ -472,25 +521,71 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
472521
}
473522

474523
if (markerStartPos > 0) {
524+
// the dep list includes the main chunk, so only need to reload when there are actual other deps.
525+
const depsArray =
526+
deps.size > 1 ||
527+
// main chunk is removed
528+
(hasRemovedPureCssChunk && deps.size > 0)
529+
? [...deps]
530+
: []
531+
532+
let renderedDeps: string[]
533+
if (normalizedFile && customModulePreloadPaths) {
534+
const { modulePreload } = config.build
535+
const resolveDependencies =
536+
modulePreload && modulePreload.resolveDependencies
537+
let resolvedDeps: string[]
538+
if (resolveDependencies) {
539+
// We can't let the user remove css deps as these aren't really preloads, they are just using
540+
// the same mechanism as module preloads for this chunk
541+
const cssDeps: string[] = []
542+
const otherDeps: string[] = []
543+
for (const dep of depsArray) {
544+
;(dep.endsWith('.css') ? cssDeps : otherDeps).push(dep)
545+
}
546+
resolvedDeps = [
547+
...resolveDependencies(normalizedFile, otherDeps, {
548+
hostId: file,
549+
hostType: 'js'
550+
}),
551+
...cssDeps
552+
]
553+
} else {
554+
resolvedDeps = depsArray
555+
}
556+
557+
renderedDeps = resolvedDeps.map((dep: string) => {
558+
const replacement = toOutputFilePathInJS(
559+
dep,
560+
'asset',
561+
chunk.fileName,
562+
'js',
563+
config,
564+
toRelativePath
565+
)
566+
const replacementString =
567+
typeof replacement === 'string'
568+
? JSON.stringify(replacement)
569+
: replacement.runtime
570+
571+
return replacementString
572+
})
573+
} else {
574+
renderedDeps = depsArray.map((d) =>
575+
// Don't include the assets dir if the default asset file names
576+
// are used, the path will be reconstructed by the import preload helper
577+
JSON.stringify(
578+
optimizeModulePreloadRelativePaths
579+
? toRelativePath(d, file)
580+
: d
581+
)
582+
)
583+
}
584+
475585
s.overwrite(
476586
markerStartPos,
477587
markerStartPos + preloadMarkerWithQuote.length,
478-
// the dep list includes the main chunk, so only need to reload when there are
479-
// actual other deps. Don't include the assets dir if the default asset file names
480-
// are used, the path will be reconstructed by the import preload helper
481-
deps.size > 1 ||
482-
// main chunk is removed
483-
(hasRemovedPureCssChunk && deps.size > 0)
484-
? `[${[...deps]
485-
.map((d) =>
486-
JSON.stringify(
487-
relativePreloadUrls
488-
? path.relative(path.dirname(file), d)
489-
: d
490-
)
491-
)
492-
.join(',')}]`
493-
: `[]`,
588+
`[${renderedDeps.join(',')}]`,
494589
{ contentOnly: true }
495590
)
496591
rewroteMarkerStartPos.add(markerStartPos)

‎packages/vite/src/node/plugins/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ export async function resolvePlugins(
3737
const buildPlugins = isBuild
3838
? (await import('../build')).resolveBuildPlugins(config)
3939
: { pre: [], post: [] }
40+
const { modulePreload } = config.build
4041

4142
return [
4243
isWatch ? ensureWatchPlugin() : null,
4344
isBuild ? metadataPlugin() : null,
4445
preAliasPlugin(config),
4546
aliasPlugin({ entries: config.resolve.alias }),
4647
...prePlugins,
47-
config.build.polyfillModulePreload
48+
modulePreload === true ||
49+
(typeof modulePreload === 'object' && modulePreload.polyfill)
4850
? modulePreloadPolyfillPlugin(config)
4951
: null,
5052
...(isDepsOptimizerEnabled(config, false) ||

‎packages/vite/src/node/plugins/worker.ts

+11-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import type { Plugin } from '../plugin'
66
import type { ViteDevServer } from '../server'
77
import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
88
import { cleanUrl, getHash, injectQuery, parseRequest } from '../utils'
9-
import { onRollupWarning, toOutputFilePathInString } from '../build'
9+
import {
10+
createToImportMetaURLBasedRelativeRuntime,
11+
onRollupWarning,
12+
toOutputFilePathInJS
13+
} from '../build'
1014
import { getDepsOptimizer } from '../optimizer'
1115
import { fileToUrl } from './asset'
1216

@@ -318,6 +322,10 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
318322
)
319323
}
320324
if (code.match(workerAssetUrlRE) || code.includes('import.meta.url')) {
325+
const toRelativeRuntime = createToImportMetaURLBasedRelativeRuntime(
326+
outputOptions.format
327+
)
328+
321329
let match: RegExpExecArray | null
322330
s = new MagicString(code)
323331

@@ -328,13 +336,13 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
328336
while ((match = workerAssetUrlRE.exec(code))) {
329337
const [full, hash] = match
330338
const filename = fileNameHash.get(hash)!
331-
const replacement = toOutputFilePathInString(
339+
const replacement = toOutputFilePathInJS(
332340
filename,
333341
'asset',
334342
chunk.fileName,
335343
'js',
336344
config,
337-
outputOptions.format
345+
toRelativeRuntime
338346
)
339347
const replacementString =
340348
typeof replacement === 'string'

‎playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
3+
4+
test('should have no 404s', () => {
5+
browserLogs.forEach((msg) => {
6+
expect(msg).not.toMatch('404')
7+
})
8+
})
9+
10+
describe.runIf(isBuild)('build', () => {
11+
test('dynamic import', async () => {
12+
const appHtml = await page.content()
13+
expect(appHtml).toMatch('This is <b>home</b> page.')
14+
})
15+
16+
test('dynamic import with comments', async () => {
17+
await page.goto(viteTestUrl + '/#/hello')
18+
const html = await page.content()
19+
expect(html).not.toMatch(/link rel="modulepreload"/)
20+
expect(html).not.toMatch(/link rel="stylesheet"/)
21+
})
22+
})

‎playground/preload/__tests__/preload-disabled/vite.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../vite.config-preload-disabled')

‎playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
3+
4+
test('should have no 404s', () => {
5+
browserLogs.forEach((msg) => {
6+
expect(msg).not.toMatch('404')
7+
})
8+
})
9+
10+
describe.runIf(isBuild)('build', () => {
11+
test('dynamic import', async () => {
12+
const appHtml = await page.content()
13+
expect(appHtml).toMatch('This is <b>home</b> page.')
14+
})
15+
16+
test('dynamic import with comments', async () => {
17+
await page.goto(viteTestUrl + '/#/hello')
18+
const html = await page.content()
19+
expect(html).toMatch(
20+
/link rel="modulepreload".*?href="http.*?\/Hello\.\w{8}\.js"/
21+
)
22+
expect(html).toMatch(/link rel="modulepreload".*?href="\/preloaded.js"/)
23+
expect(html).toMatch(
24+
/link rel="stylesheet".*?href="http.*?\/Hello\.\w{8}\.css"/
25+
)
26+
})
27+
})

‎playground/preload/__tests__/resolve-deps/vite.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../vite.config-resolve-deps')

‎playground/preload/package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@
66
"dev": "vite",
77
"build": "vite build",
88
"debug": "node --inspect-brk ../../packages/vite/bin/vite",
9-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"dev:resolve-deps": "vite --config vite.config-resolve-deps.ts",
11+
"build:resolve-deps": "vite build --config vite.config-resolve-deps.ts",
12+
"debug:resolve-deps": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-resolve-deps.ts",
13+
"preview:resolve-deps": "vite preview --config vite.config-resolve-deps.ts",
14+
"dev:preload-disabled": "vite --config vite.config-preload-disabled.ts",
15+
"build:preload-disabled": "vite build --config vite.config-preload-disabled.ts",
16+
"debug:preload-disabled": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-preload-disabled.ts",
17+
"preview:preload-disabled": "vite preview --config vite.config-preload-disabled.ts"
1018
},
1119
"dependencies": {
1220
"vue": "^3.2.39",

‎playground/preload/public/preloaded.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('preloaded')

‎playground/preload/vite.config-preload-disabled.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import vuePlugin from '@vitejs/plugin-vue'
2+
import { defineConfig } from 'vite'
3+
4+
export default defineConfig({
5+
plugins: [vuePlugin()],
6+
build: {
7+
minify: 'terser',
8+
terserOptions: {
9+
format: {
10+
beautify: true
11+
},
12+
compress: {
13+
passes: 3
14+
}
15+
},
16+
modulePreload: false
17+
}
18+
})

‎playground/preload/vite.config-resolve-deps.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import vuePlugin from '@vitejs/plugin-vue'
2+
import { defineConfig } from 'vite'
3+
4+
export default defineConfig({
5+
plugins: [vuePlugin()],
6+
build: {
7+
minify: 'terser',
8+
terserOptions: {
9+
format: {
10+
beautify: true
11+
},
12+
compress: {
13+
passes: 3
14+
}
15+
},
16+
modulePreload: {
17+
resolveDependencies(filename, deps, { hostId, hostType }) {
18+
if (filename.includes('Hello')) {
19+
return [...deps, 'preloaded.js']
20+
}
21+
return deps
22+
}
23+
}
24+
},
25+
experimental: {
26+
renderBuiltUrl(filename, { hostId, hostType }) {
27+
if (filename.includes('preloaded')) {
28+
return { runtime: `""+${JSON.stringify('/' + filename)}` }
29+
}
30+
return { relative: true }
31+
}
32+
}
33+
})

0 commit comments

Comments
 (0)
Please sign in to comment.