[英]Certain files not being bundled in ViteJS
While bunldling a Vanilla JS project with image assets, using npm run build
, there was one image that was not being bundled.在使用
npm run build
将Vanilla JS项目与图像资产捆绑在一起时,有一个图像没有被捆绑。
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.我以相同的方式导入了所有图像,在一个文件中使用
import... from "filename.png"
语法。
This is the output of npm run build
NOTE Clearly, ash.png
is not included, whereas player.png
in the same folder is included.这是
npm run build
的输出注意很明显, ash.png
不包括在内,而同一文件夹中的player.png
包括在内。 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.
npm run dev
, all the images load and everything worksnpm run dev
启动开发服务器时,所有图像都会加载并且一切正常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 consolenpm run serve
构建和预览之后, ash.png
不会加载并且警告vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet
is displayed in the consolePlease refer to the repository here , containing all files and assets as is请在此处参考存储库,其中包含所有文件和资产
npm run dev
and the project should work (the game should load with both images - player.png
and ash.png
)npm run dev
运行开发服务器,项目应该可以运行(游戏应该加载两个图像 - player.png
和ash.png
)npm run build
then npm run serve
and reproduce the bugnpm 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 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.
This question has been raised as a Github issue此问题已作为Github 问题提出
This is not a bug but vite's Static Assets Handling
behavior.这不是错误,而是 vite 的
Static Assets Handling
行为。
Assets smaller in bytes than the
assetsInlineLimit
option will be inlined as base64 data URLs.比
assetsInlineLimit
选项更小的资产将被内联为 base64 数据 URL。
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) .这意味着
ash.png
包含为data URI
,因为您可以在输出中读取它,但在您的情况下不受支持(这是另一个问题的范围,我现在没有答案) 。
vendor.354f1e58.js:105 Local data URIs are not supported: ash-spritesheet is displayed in the console
vendor.354f1e58.js:105 不支持本地数据URI:控制台显示ash-spritesheet
If you debug spritesheets
with console.log(spritesheets)
you should see the included assets :如果您使用
console.log(spritesheets)
调试spritesheets
,您应该会看到包含的资产:
{
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.现在,如果您将
assetsInlineLimit
设置为低于vite.config.js
中文件ash.png
的大小,它将作为资产包含在内。
To test it, in a file vite.config.js
write :要对其进行测试,请在文件
vite.config.js
写入:
import { defineConfig } from "vite";
export default defineConfig({
build: {
assetsInlineLimit: '2048' // 2kb
}
});
Output of yarn build
and assetsInlineLimit: '2048'
: 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
More info there: https://vitejs.dev/guide/assets.html#importing-asset-as-url更多信息: https ://vitejs.dev/guide/assets.html#importing-asset-as-url
Imported or referenced assets that are smaller threshold will be inlined as base64 URLs to avoid extra http requests.
较小阈值的导入或引用资产将被内联为 base64 URL,以避免额外的 http 请求。 Set to 0 to disable inlining altogether.
设置为 0 以完全禁用内联。
file ./vite.config.js
文件
./vite.config.js
code代码
export default defineConfig({
build: {
assetsInlineLimit: 4096,
},
})
ref参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.