某些文件没有被捆绑在 ViteJS 中

Question

错误

• 在使用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 is displayed in the console

再生产

请在此处参考存储库，其中包含所有文件和资产

1. 使用npm run dev运行开发服务器，项目应该可以运行（游戏应该加载两个图像 - player.png和ash.png ）
2. 使用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

使用过的包管理器

npm

日志

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

Answer 1

这不是错误，而是 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

Answer 2

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

较小阈值的导入或引用资产将被内联为 base64 URL，以避免额外的 http 请求。 设置为 0 以完全禁用内联。

• https://vitejs.dev/config/build-options.html#build-assetsinlinelimit
• https://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