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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cc41608 · Jul 22, 2023

History

10 Commits
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023
Jul 22, 2023
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023
Jul 9, 2023
Jul 9, 2023
Jul 22, 2023
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023
Jul 1, 2023

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

Notice: The plugin only accepts either Array<'es' | 'cjs'> or Array<'umd' | 'iife'> as the build.lib.formats option. If you wish to build both es and umd formats, please create separate builds for each.

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

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

Example: playground/

Option

export interface Options {
  name?: string | ((resourcePath: string, resourceQuery: string) => string)
  limit?: number
  extensions?: string[]
  outputPath?: string | ((url: string, resourcePath: string, resourceQuery: string) => string)
  regExp?: RegExp
  publicUrl?: string
}

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
    })

extensions

File types to be processed.

  • Type: string[]
  • Default: ['.jpg', '.jpeg', '.png', '.apng', '.gif', '.bmp', '.svg', '.webp']
  • Example:
    libAssetsPlugin({
      // Only process the following file types
      extensions: ['.jpg', '.png', '.webp']
    })

outputPath

Specify the output path where the extracted files will be placed, its usage aligns with the outputPath option of the file-loader.

  • 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 in the browser. Applies exclusively to umd | iife format builds.

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