add an option to not to inline assets in library mode when format is 'es'

Clear and concise description of the problem

Currently when using library mode, all the assets (images, videos…) are inlined using base64. When those assets are big, it takes a long for vite to build, and the browser also takes a long time to parse the javascript.

Suggested solution

When the library format is ‘es’, we can add an option to make vite emit those files, and import those files in javascript using new URL(import.meta.url, '...'), e.g.

import foo from './image.png';

const bar = foo; // new URL(import.meta.url, './assets/image.2d8efhg.png')

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[artemtam]

Are there any updates on that? It seems like a very common use-case for libraries – barely anyone wants fonts to be inlined in CSS.

[g10]

…this works for css…

assets in public folder

public/fonts/Font.otf

in css, ./ dot prefix the path

@font-face {
  src: url("./fonts/Font.otf") format("opentype");
}

in vite.config, build lib with es format

  build: {
    lib: {
      formats: ["es"],
      …
    },
   outDir: "./lib",
   …

the public folder content is copied to lib and paths in css are preserved → no inline assets

package.json

  …
  "files": [
    "lib/*",
    …
  ],
  "exports": {
    ".": {
      "import": "./lib/index.es.js"
    },
    "./style.css": "./lib/style.css"
    …
  },