Skip to content

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

License

Notifications You must be signed in to change notification settings

laynezh/vite-plugin-lib-assets

Repository files navigation

English | 中文

@laynezh/vite-plugin-lib-assets

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

Install

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

Usage

// vite.config.ts
import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'

export default defineConfig({
  plugins: [
    libAssetsPlugin({ /* options */ }),
  ],
})

Example: playground/

Hints

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

Option

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.

  • Type: string | RegExp | (string | RegExp)[]
  • Default: Same as Vite's default value for assetsInclude, you can find the complete list here.
  • Example:
    libAssetsPlugin({
      include: /\.a?png(\?.*)?$/
    })

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:
    libAssetsPlugin({
      exclude: /\.svg(\?.*)?$/
    })

name

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

  • Type: string | ((resourcePath: string, resourceQuery: string) => string)
  • Default: '[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.

  • Type: number,unit Byte
  • Default: undefined,any size of resource files will be extracted
  • Example:
    libAssetsPlugin({
      limit: 1024 * 8 // 8KB
    })

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
      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.

  • Type: RegExp
  • Default: undefined
  • Example:
    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.

  • Type: string
  • Default: ''
  • Example:
    libAssetsPlugin({
      publicUrl: 'https://cdn.jsdelivr.net/npm/@laynezh/vite-plugin-lib-assets'
    })

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •