Certain files not being bundled in ViteJS

Question

The Bug

While bunldling a Vanilla JS project with image assets, using npm run build, there was one image that was not being bundled.
The image that was not being bundled was the last image to be pasted into my project
I have imported all images in the same way, using import ... from "filename.png" syntax in one file.
This is the output of npm run build NOTE Clearly, ash.png is not included, whereas player.png in the same folder is included. Both are imported in the same file in the same way as shown above.

❯  npm run build

> clean-rpg@0.0.0 build D:\Sattwik\code\web\js\game-dev\clean-rpg
> tsc && vite build

vite v2.5.6 building for production...
✓ 22 modules transformed.
dist/assets/favicon.17e50649.svg        1.49 KiB
dist/assets/room-builder.325bbcfc.png   20.98 KiB
dist/assets/things.5fe02e3d.png         27.07 KiB
dist/assets/player.c5281145.png         7.15 KiB
dist/assets/ground.8651476d.png         69.11 KiB
dist/assets/interior.294e2488.png       203.12 KiB
dist/index.html                         0.78 KiB
dist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB
dist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB
dist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

On starting the dev server with npm run dev, all the images load and everything works
But after building and previewing with npm run serve, ash.png does not load and a warning vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet is displayed in the console

Reproduction

Please refer to the repository here, containing all files and assets as is

Run the dev server with npm run dev and the project should work (the game should load with both images - player.png and ash.png)
Preview with npm run build then npm run serve and reproduce the bug

System Info

❯  npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
npx: installed 1 in 6.14s

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Pentium(R) Dual-Core  CPU      E5300  @ 2.60GHz
    Memory: 1.10 GB / 2.99 GB
  Binaries:
    Node: 12.21.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Internet Explorer: 8.0.7601.17514
  npmPackages:
    vite: ^2.5.4 => 2.5.6

Used Package Manager

npm

Logs

❯  npx vite build --debug
  vite:config no config file found. +0ms
  vite:config using resolved config: {
  vite:config   root: 'D:/Sattwik/code/web/js/game-dev/clean-rpg',
  vite:config   base: '/',
  vite:config   mode: 'production',
  vite:config   configFile: undefined,
  vite:config   logLevel: undefined,
  vite:config   clearScreen: undefined,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\\public',
  vite:config   cacheDir: 'D:\\Sattwik\\code\\web\\js\\game-dev\\clean-rpg\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'asset-import-meta-url',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'load-fallback'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +46ms
vite v2.5.6 building for production...
transforming (1) index.html  vite:resolve 0ms   ./assets/ui/msg-box.png -> D:/Sattwik/code/web/js/game-dev/clean-rpg/src/assets/ui/msg-box.png +0ms
✓ 22 modules transformed.
dist/assets/favicon.17e50649.svg        1.49 KiB
dist/assets/player.c5281145.png         7.15 KiB
dist/assets/room-builder.325bbcfc.png   20.98 KiB
dist/assets/things.5fe02e3d.png         27.07 KiB
dist/assets/ground.8651476d.png         69.11 KiB
dist/assets/interior.294e2488.png       203.12 KiB
dist/index.html                         0.78 KiB
dist/assets/index.cc5b3aa7.css          2.35 KiB / brotli: 1.40 KiB
dist/assets/index.f94427a3.js           137.68 KiB / brotli: 8.73 KiB
dist/assets/vendor.354f1e58.js          1305.08 KiB / brotli: skipped (large chunk)

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

GitHub Issues

This question has been raised as a Github issue

flydev · Answer 1 · 2022-06-14T12:18:17.307

This is not a bug but vite's Static Assets Handling behavior.

Assets smaller in bytes than the assetsInlineLimit option will be inlined as base64 data URLs.

This mean that ash.png is include as data URI as you can read it on the output but isn't supported in your case (that's the scope of another question, I don't have the answer right now).

vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet is displayed in the console

If you debug spritesheets with console.log(spritesheets) you should see the included assets :

{
  player: '/assets/player.c5281145.png'
  ash: "data:image/png;base64,iVBORw0KGgoA ..."
}

Now if you set assetsInlineLimit to a lower value than the size of the file ash.png in vite.config.js it will be included as asset.

To test it, in a file vite.config.js write :

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    assetsInlineLimit: '2048' // 2kb
  }
});

Output of yarn build and assetsInlineLimit: '2048':

dist/assets/favicon.17e50649.svg                1.49 KiB
dist/assets/ground.8651476d.png                 69.11 KiB
dist/assets/player.c5281145.png                 7.15 KiB
dist/assets/things.5fe02e3d.png                 27.07 KiB
dist/assets/room-builder.325bbcfc.png           20.98 KiB
dist/assets/interior.294e2488.png               203.12 KiB

dist/assets/ash-walking-fire-red.1de7621c.png   3.76 KiB

More info there: https://vitejs.dev/guide/assets.html#importing-asset-as-url

Nice, the Vite docs are not very helpful TBH. – Mathew Dony Jun 17 '22 at 00:08 — Mathew Dony, Jun 17 '22 at 00:08

score 3 · Answer 2 · answered Dec 17 '22 at 11:18

Q) Why Vite.js translate " linked content " into Base64 ?

Imported or referenced assets that are smaller threshold will be inlined as base64 URLs to avoid extra http requests. Set to 0 to disable inlining altogether.

https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

https://vitejs.dev/guide/assets.html#importing-asset-as-url

file ./vite.config.js

code

export default defineConfig({
    build: {
        assetsInlineLimit: 4096,
    },
})

ref

https://github.com/vitejs/vite/discussions/11405#discussioncomment-4437161