虫子

在使用npm run build将 Vanilla JS 项目与图像资产捆绑在一起时，有一个图像未被捆绑。
未绑定的图像是要粘贴到项目中的最后一个图像

我以同样的方式导入了所有图像，在一个文件中使用import ... from "filename.png"语法。
这是npm run build的输出注意很明显，ash.png不包括在内，而同一文件夹中的player.png包括在内。两者都以如上所示的相同方式导入到同一文件中。

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

使用npm run dev启动开发服务器时，所有映像都会加载，一切正常
但使用npm run serve构建和预览后，ash.png不会加载，并且控制台中会显示警告vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet

再现

请参考存储库here，其中包含 * 按原样 * 的所有文件和资产
1.使用npm run dev运行开发服务器，项目应该可以运行（游戏应该加载两个映像-player.png和ash.png）
1.使用npm run build预览，然后使用npm run serve预览，并重现错误

系统信息

❯  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

使用的程序包管理器

国家预防机制

日志

❯  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问题

此问题已作为Github issue提出

这不是一个bug，而是vite的Static Assets Handling行为。
字节数小于assetsInlineLimit选项的资源将作为base64数据URL内联。
这意味着ash.png包含为data URI，因为您可以在输出中看到它，但在您的情况下不受支持 （这是另一个问题的范围，我现在没有答案）。
vendor.354f1e58.js：105不支持本地数据URI：ash-spritesheet显示在控制台中
如果使用console.log(spritesheets)调试spritesheets，您应该会看到包含的资产：

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

现在，如果您将assetsInlineLimit设置为比vite.config.js中的文件ash.png的大小更小的值，则它将作为资产包括在内。
要测试它，请在文件vite.config.js中写入：

import { defineConfig } from "vite";

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

yarn build和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

型
更多信息：https://vitejs.dev/guide/assets.html#importing-asset-as-url

2条答案

按热度按时间

k10s72fa1#

赞(0）回复(0）举报 2022-12-18

thigvfpy2#

Q）为什么Vite.js会将“链接内容“翻译成Base64？

小于**阈值的导入或引用资源将作为base64 URL内联，以避免额外的http请求。*设置为0可完全禁用内联。
- 网址：http：vitejs.dev/config/build-options.html#build-assetsinlinelimit*
- 网址：http：vitejs.dev/guide/assets.html#importing-asset-as-url*

文件./vite.config.js
代码

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

参考

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

NodeJS ViteJS中未捆绑某些文件

虫子

再现

系统信息

使用的程序包管理器

日志

GitHub问题

2条答案

Q）为什么Vite.js会将“链接内容“翻译成Base64？

相关问题

热门标签

最新问答