Image

lightning-fast-builds-with-vite

1 min read
Last update: December 19, 2021

Working with Assets

In addition to CSS features, Vite can directly import web assembly .webm, or you can load up a file with the worker query:

import Worker from './food.js?worker'

This will load the library as a web worker, which you can instantiate.

Imported Assets

We can import static assets into our main.js.

import favicon from './favicon.svg'

When we import assets the file is considered part of our module graph. This variable can then be used inside your templates, and it will return the URL where that static asset will be located. When you build application using Vite, it will use the proper URL.

Then when I use $ npm run build, it will compile our application into our /dist directory and it will move the favicon into the /dist/assets directory, and add a hash the image name.

Public Assets

If we need certain assets to be served from the same location, without a hash, we can create a public directory. If we place favicon.svg into that directory, we can now reference in our html or javascript /favicon.svg and it will be found. Anything in public will be served at the server root.