English | 中文

@laynezh/vite-plugin-lib-assets

A Vite Plugin extracts resource files referenced in library mode instead of embedded them as base64.

Install

1npm i @laynezh/vite-plugin-lib-assets -D

Or

1yarn add @laynezh/vite-plugin-lib-assets -D

Or

1pnpm add @laynezh/vite-plugin-lib-assets -D

Usage

1// vite.config.ts
2import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
3
4export default defineConfig({
5  plugins: [
6    libAssetsPlugin({ /* options */ }),
7  ],
8})

Example: playground/

Hints

• If build.ssr is set to true, you might want to enable build.ssrEmitAssets, so assets are emitted.

Option

1export interface Options {
2  include?: string | RegExp | (string | RegExp)[]
3  exclude?: string | RegExp | (string | RegExp)[]
4  name?: string
5  limit?: number
6  outputPath?: string | ((url: string, resourcePath: string, resourceQuery: string) => string)
7  regExp?: RegExp
8  publicUrl?: string
9}

include

A valid picomatch pattern, or array of patterns indicate which files need to be handled by the plugin.

• Type: string | RegExp | (string | RegExp)[]
• Default: Same as Vite's default value for assetsInclude, you can find the complete list here.
• Example:

  1libAssetsPlugin({
  2  include: /\.a?png(\?.*)?$/
  3})

exclude

Same as include, but it is used to indicate the files that should to be omitted.

• Type: string | RegExp | (string | RegExp)[]
• Default: undefined.
• Example:

  1libAssetsPlugin({
  2  exclude: /\.svg(\?.*)?$/
  3})

name

Output name of the resource file, its usage aligns with the name option of the file-loader.

• Type: string
• Default: '[contenthash].[ext]'
• Example:

  1libAssetsPlugin({
  2  name: '[name].[contenthash:8].[ext][query]'
  3})

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.

• Type: number，unit Byte
• Default: undefined，any size of resource files will be extracted
• Example:

  1libAssetsPlugin({
  2  limit: 1024 * 8 // 8KB
  3})

outputPath

Specify the output path where the extracted files will be placed.

• Type: string | ((url: string, resourcePath: string, resourceQuery: string) => string)
• Default: Vite's assetsDir configuration.
• Example:
  • string

    1libAssetsPlugin({
    2  outputPath: 'images'
    3})

  • function

    1libAssetsPlugin({
    2  outputPath: (url, resourcePath, resourceQuery) => {
    3    // `url` - file name processed by the `name` option，eg: `logo.fb2133.png`
    4    // `resourcePath` - `/original/absolute/path/to/file.js`
    5    // `resourceQuery` - `?foo=bar`
    6
    7    return url.endsWith('.png') ? 'image' : 'assets'
    8  },
    9})

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.

• Type: RegExp
• Default: undefined
• Example:

  1libAssetsPlugin({
  2  regExp: /\/([^/]+)\/[^\.]+.png$/,
  3  name: '[1]-[name].[contenthash:8].[ext]'
  4})

publicUrl

Access path prefix for built resource files. Once provided, it will take effect, even while building the cjs and esm formats.

• Type: string
• Default: ''
• Example:

  1libAssetsPlugin({
  2  publicUrl: 'https://cdn.jsdelivr.net/npm/@laynezh/vite-plugin-lib-assets'
  3})