shared options: resolution & assets

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Git LFS placeholders excluded from inlining

Git LFS placeholders are automatically excluded from inlining because they do not contain the content of the file they represent. To enable inlining, file contents must be downloaded via Git LFS before building.

assetsInclude option extends asset detection

The assetsInclude configuration option allows you to extend the internal list of detected asset file types. Common image, media, and font filetypes are detected as assets automatically, and assetsInclude can be used to add additional types.

Explicit URL imports with ?url suffix

Assets can be explicitly imported as a URL using the ?url suffix. This is useful for importing assets not included in the internal list or assetsInclude configuration, such as Houdini Paint Worklets.

Explicit inline handling with ?inline and ?no-inline

Assets can be explicitly imported with inlining or no inlining using the ?inline or ?no-inline suffix respectively. The ?inline suffix forces inlining as base64, while ?no-inline prevents inlining.

Import assets as strings with ?raw suffix

Assets can be imported as strings using the ?raw suffix. This imports the asset content as a string rather than as a URL or module.

import.meta.url with URL constructor for asset resolution

The pattern new URL('./img.png', import.meta.url).href can be used to obtain the full resolved URL of a static asset. This works natively in modern browsers and Vite transforms it during production builds to maintain correct URLs after bundling and hashing.

Dynamic URL templates with import.meta.url

The new URL pattern supports dynamic URLs via template literals, such as new URL(`./dir/${name}.png`, import.meta.url).href. However, the URL string must be static so Vite can analyze it; dynamic strings that cannot be determined at build time will not be transformed.

SVG URL wrapping in manually constructed url() functions

When passing a URL of an SVG to a manually constructed url() function in JavaScript, the variable should be wrapped within double quotes, for example url("${imgUrl}").

resolve.extensions option type and default

The resolve.extensions option is of type string[] with a default value of ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']. It specifies a list of file extensions to try for imports that omit extensions.

resolve.alias type and purpose

The resolve.alias option is of type Record<string, string> or Array<{ find: string | RegExp, replacement: string }>. It defines aliases used to replace values in import or require statements, working similar to @rollup/plugin-alias. When aliasing to file system paths, absolute paths must be used; relative alias values are used as-is and not resolved into file system paths. The order of entries is important, with first-defined rules applied first.

resolve.dedupe option type

The resolve.dedupe option is of type string[]. It forces Vite to always resolve listed dependencies to the same copy from the project root, useful when there are duplicated copies of the same dependency in the app due to hoisting or linked packages in monorepos.

resolve.conditions option type and default

The resolve.conditions option is of type string[] with a default value of ['module', 'browser', 'development|production']. It specifies additional allowed conditions when resolving Conditional Exports from a package. The special value 'development|production' is replaced with 'production' or 'development' depending on the value of process.env.NODE_ENV.

resolve.mainFields option type and default

The resolve.mainFields option is of type string[] with a default value of ['browser', 'module', 'jsnext:main', 'jsnext']. It specifies the list of fields in package.json to try when resolving a package's entry point. This takes lower precedence than conditional exports resolved from the exports field.

resolve.preserveSymlinks option type and default

The resolve.preserveSymlinks option is of type boolean with a default value of false. When enabled, Vite determines file identity by the original file path without following symlinks, instead of using the real file path after following symlinks.

resolve.tsconfigPaths option type and default

The resolve.tsconfigPaths option is of type boolean with a default value of false. When enabled, it uses the paths option in tsconfig.json to resolve imports.

Give your agent this brain