English | 中文
A Vite Plugin extracts resource files referenced in library mode
instead of embedded them as base64.
npm i @laynezh/vite-plugin-lib-assets -D
Or
yarn add @laynezh/vite-plugin-lib-assets -D
Or
pnpm add @laynezh/vite-plugin-lib-assets -D
// vite.config.ts
import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
export default defineConfig({
plugins: [
libAssetsPlugin({ /* options */ }),
],
})
Example: playground/
build.ssr
is set to true
, you might want to enable build.ssrEmitAssets
, so assets are emitted.export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
name?: string | ((resourcePath: string, resourceQuery: string) => string)
limit?: number
outputPath?: string | ((url: string, resourcePath: string, resourceQuery: string) => string)
regExp?: RegExp
publicUrl?: string
}
include
A valid picomatch pattern, or array of patterns indicate which files need to be handled by the plugin.
string | RegExp | (string | RegExp)[]
assetsInclude
, you can find the complete list here.libAssetsPlugin({
include: /\.a?png(\?.*)?$/
})
exclude
Same as include
, but it is used to indicate the files that should to be omitted.
string | RegExp | (string | RegExp)[]
undefined
.libAssetsPlugin({
exclude: /\.svg(\?.*)?$/
})
name
Output name of the resource file, its usage aligns with the name
option of the file-loader
.
string | ((resourcePath: string, resourceQuery: string) => string)
'[contenthash].[ext]'
Example:
string
libAssetsPlugin({
name: '[name].[contenthash:8].[ext]?[query]'
})
function
libAssetsPlugin({
name: (resourcePath, resourceQuery) => {
// `resourcePath` - `/absolute/path/to/file.js`
// `resourceQuery` - `foo=bar`
if (process.env.NODE_ENV === 'development') {
return '[name].[ext]';
}
return '[name].[contenthash:8].[ext]?[query]'
},
})
The complete list can be found at
loader-utils#interpolatename
limit
Files larger than the limit
will be extracted to the output directory, smaller files will remain embedded in the artifact in base64 format.
number
,unit Byte
undefined
,any size of resource files will be extractedlibAssetsPlugin({
limit: 1024 * 8 // 8KB
})
outputPath
Specify the output path where the extracted files will be placed.
string | ((url: string, resourcePath: string, resourceQuery: string) => string)
Vite
's assetsDir
configuration.Example:
string
libAssetsPlugin({
outputPath: 'images'
})
function
libAssetsPlugin({
outputPath: (url, resourcePath, resourceQuery) => {
// `url` - file name processed by the `name` option,eg: `logo.fb2133.png`
// `resourcePath` - `/original/absolute/path/to/file.js`
// `resourceQuery` - `foo=bar`
return url.endsWith('.png') ? 'image' : 'assets'
},
})
regExp
Specifies a Regular Expression to extract parts of content(capture groups) from the file path and use [N] as placeholders in the name
for replacement. Its usage aligns with the regexp
option of the file-loader
.
RegExp
undefined
libAssetsPlugin({
regExp: /\/([^/]+)\/[^\.]+.png$/,
name: '[1]-[name].[contenthash:8].[ext]'
})
publicUrl
Access path prefix for built resource files. Once provided, it will take effect, even while building the cjs and esm formats.
string
''
libAssetsPlugin({
publicUrl: 'https://cdn.jsdelivr.net/npm/@laynezh/vite-plugin-lib-assets'
})