某些未在ViteJS中捆绑的文件

Question

臭虫

• 当使用npm run build捆绑一个Vanilla项目和图像资产时，有一个映像没有被捆绑。
• 没有捆绑的图像是最后一张粘贴到我的项目中的图像。

• 我以相同的方式导入了所有的图像，在一个文件中使用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启动dev服务器时，all将加载图像，一切正常。
• 但是，在使用npm run serve构建和预览之后，ash.png将不加载，并在控制台中显示警告vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet。

再生产

请参阅存储库这里，其中包含所有文件和资产

1. 使用npm run dev运行开发服务器，项目应该可以工作(游戏应该同时加载图像- player.png和ash.png)
2. 使用npm run build预览，然后npm run serve并复制该bug

系统信息

❯  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

这是，不是bug，而是vite的Static Assets Handling行为。

小于assetsInlineLimit选项字节的资产将内联为base64数据URL。

这意味着ash.png包含为data URI，因为您可以在输出中阅读它，但在您的情况下不支持它(这是另一个问题的范围，我现在还没有答案)。

354f1e58.js:105个本地数据URI不受支持：

如果使用spritesheets调试console.log(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